\n\n\n\n\n<\/p>
How to Make a Website With HTML<\/h2>
This section will provide step-by-step instructions to code a site with HTML. Before proceeding, refer to our HTML cheat sheet<\/a> if you are unfamiliar with the standard markup language. Feel free to check out our guide on the basics of building a site<\/a> to get more familiar.<\/p> A code editor is software used to write your website. While you can create an HTML page with a default text editor like Notepad, it lacks features that help simplify the development process, such as:<\/p> Since there are many options, we have listed some of the best HTML code editors<\/a> to help you find one that fits your needs:<\/p> Creating a layout plan allows you to better visualize your website’s look. You can also use it as a checklist to track what elements to include in your site.<\/p> In addition, a layout plan helps you determine your site’s usability and navigation, which affect user experience. Some elements to consider when planning include the sites’ header, footer, and navigation.<\/p> You can use pen and paper or web design software such as Figma<\/a> to design a website layout. It doesn’t have to be detailed as long as it roughly represents the look and feel of your site.<\/p> Once the tool and layout plan is ready, you can start writing your site’s code. The steps may vary depending on your code editor, but the general idea is similar.<\/p> In this tutorial, we will show you how to do it using VSCode<\/strong>:<\/p> To help you understand the code, here’s an explanation of each tag:<\/p> Learn the difference between making a website using WordPress vs HTML<\/a> to know which technique suits you best.<\/p>\n <\/div>\n\n\n\n<\/p> Add HTML code into the index.html <\/strong>file to create the elements of your planned layout. Depending on your website design, you will need different HTML semantic elements<\/a>.<\/p> These elements will separate your site into multiple sections and become the containers for the content. Here are the tags we will use:<\/p> Put these elements within the <body><\/body> <\/strong>tags in your index.html <\/strong>file’s code. Ensure to close each element with a closing tag, or your code won’t work.<\/p> Here’s how the complete code looks:<\/p> After the layout is ready, start filling them with your site’s content, like text, images, hyperlinks, or videos. If the content is not ready, use dummy content as a placeholder and replace it later.<\/p> Here are some tags we will use to add the website content:<\/p> The img<\/b> tag also has an optional alt<\/strong> attribute. It describes the image in case the file doesn’t load.<\/p>\n <\/div>\n\n\n\n<\/p> Here’s what the code looks like:<\/p> After adding the code, your HTML website will have an appearance. Here’s how it looks:<\/p> Since HTML only lets you create the website’s structure and add basic content, use Cascading Style Sheets (CSS)<\/a> to change its layout. CSS is a language that defines the style of your HTML document.<\/p> To do this, create a style.css<\/strong> file and link the stylesheet to the HTML document<\/a> by adding the following code between the <head> <\/strong>opening and closing tags of index.html:<\/strong><\/p> To make the two-column website layout, we will use the flex<\/strong> property. It arranges HTML elements using flexible containers, allowing them to adjust according to users’ screen size.<\/p> Here is what the complete code looks like:<\/p> After you add the code snippet to your CSS file, here’s how the website will look:<\/p> Learn the different types of CSS, including inline, external, and internal<\/a>.<\/p>\n <\/div>\n\n\n\n<\/p> In addition to changing the layout, use CSS to customize other visual aspects of your website. For example, you can change the font family and background image.<\/p> To change your website’s appearance, add the CSS properties in the element you want to customize. For instance, here is the code to style the background color and text elements of the navigation menu bar:<\/p> After adding CSS styling for every element, here is how the website looks:<\/p> Once you have all the website files and assets ready, it’s time to publish them. This step requires hosting, which you can obtain from a hosting provider. Check out our article for tips on finding the best web host<\/a>.<\/p> Hostinger’s web hosting plans<\/a>, starting at \u20a62900.00<\/strong>, include a free domain, SSL certificate, and automated backups. The lowest-tier plan offers 25 GB SSD storage<\/strong> to host up to 25 websites, providing ample space for future web development projects.<\/p> Standard security measures, such as a web application firewall, malware scanner, Cloudflare DNS firewall, and WHOIS Privacy Protection<\/a>, safeguard your HTML website from malicious attacks. Users running on Business Web Hosting<\/strong> and above plans can also leverage our in-house DNS solution for enhanced performance.<\/p> Check out our hosting plan guide<\/a> to find the perfect fit for your website. You can try our hosting services risk-free with our 30-day money-back guarantee<\/strong>.<\/p> After obtaining hosting, use either a file manager or an FTP<\/a> client to upload your website to the internet.<\/p> Here’s how to upload your website files with Hostinger’s File Manager:<\/p> The file manager method is ideal for uploading website files under 100GB<\/strong>. Refer to our article on how to upload a website<\/a> for assistance with either method.<\/p> This section will explain the steps to take after creating a website using HTML and CSS. Follow them to enhance your site’s accessibility and functionality.<\/p> Add a Dropdown Bar for Better Navigation<\/strong><\/p> Complex websites with multiple pages have many navigation buttons, links, and texts. You can create a simple dropdown menu using CSS<\/a> <\/strong>to group these elements.<\/p> Users can expand the navigation bar to access the elements. It helps reduce clutter and improves the website’s usability for users with smaller screens.<\/p> Improve the Site Design With Advanced CSS<\/strong><\/p> CSS lets you do advanced customization to enhance your site’s design for a better user experience. For example, enable scroll snapping, text animation, zoom on hover animation, and gradients.<\/p> In addition, you can build a responsive website with media queries, CSS rules, and flexboxes. The flexbox layout automatically adapts your site to the client’s screen size.<\/p> Make the Site More Interactive With JavaScript<\/strong><\/p> JavaScript is a scripting language that lets you create interactive and dynamic website content. For example, enable animation, add countdowns, and include buttons, forms, or menus.<\/p> These features make your website more interesting and immersive, improving user experience. The steps to add JavaScript to your HTML<\/a> website are similar to those for CSS. You can use a separate file or write it directly into the current code.<\/p> Users may not have the time or commitment to learn HTML for web development. Fortunately, some platforms let them create a functional website without writing code.<\/p> A website builder<\/a> like Hostinger is an excellent option for beginners. It has a visual user interface and drag-and-drop editor, which makes customization easy.<\/p> To help you decide which method suits you better, read our tutorial to learn more about the benefits and downsides of using a website builder vs coding<\/a>. <\/p>\n <\/div>\n\n\n\n<\/p> Maintaining a builder-based website is also simpler and less prone to error as you don’t need to manually update its source code. Simply select the elements you want to edit and apply the changes directly on one screen.<\/p> Since Hostinger Website Builder is included in all our hosting plans, you don’t need to purchase the service separately. It starts from $2.99\/month <\/strong>and is upgradeable to higher-performance hosting services.<\/p> Instead of using website builders, you can code a website from scratch with HTML. Although more complicated to build, HTML websites are more resource-efficient and flexible as you can edit the source code.<\/p> In this article, we have explained how to code a website using HTML and CSS in eight steps:<\/p> After creating your HTML web page, you can add advanced CSS and JavaScript to improve navigation, interactivity, and overall design. If you’re curious about the duration of this process, you might want to check out the time needed to create a website<\/a>.<\/p> Too much to learn? Looking for a no-code builder? Check out Hostinger Website Builder:<\/p> To help you understand more about building a website with HTML, we will answer some commonly asked questions about it.<\/p> Yes, you can create a functional website with only HTML. However, it only displays static content such as text, links, images, and videos. Yes, it is good for creating a static website<\/a>. HTML websites require fewer resources to load and are flexible as you can modify the source code. More complex websites will take longer to build. The number of web developers working on the project, their skills, and resources can also affect the building time. Generally, an experienced developer can code a simple website from scratch in four to six weeks<\/a>.<\/p> <\/div> <\/div>\n","protected":false},"excerpt":{"rendered":" Building a website nowadays is simple and doesn’t require coding knowledge. Platforms like Hostinger website maker offer a simple visual interface and drag-and-drop features to ease the development process. However, you may want to build websites from scratch with Hypertext Markup Language (HTML). While it is more difficult, HTML websites are more flexible and faster […]<\/p>\n1. Pick an HTML Code Editor<\/h3>
\n
![\"Live](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/03\/Live-preview-feature-in-Visual-Studio-Code.png\/public\")
<\/a><\/figure><\/div>\n
2. Plan the Site Layout<\/h3>
![\"A](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/03\/A-rough-website-layout-plan.png\/public\")
<\/a><\/figure><\/div>3. Write the HTML Code<\/h3>
\n
<!DOCTYPE html>\n<html>\n <head>\n <title> <\/title>\n <\/head>\n <body>\n <\/body>\n<\/html><\/pre>
\n
Pro Tip<\/h4>\n
4. Create Elements in the Layout<\/h3>
\n
<!DOCTYPE html>\n<html>\n <head>\n <title>Personal Blog<\/title>\n <\/head> \n <body>\n <header> \n\n <\/header>\n <main>\n <div class=”row\">\n <div class=”post-text-box”>\n\n <\/div>\n <div class=”profile”>\n\n <\/div> \n <\/div> \n <\/main>\n <footer>\n \n <\/footer>\n <\/body>\n<\/html><\/pre>
5. Add the HTML Content<\/h3>
\n
Pro Tip<\/h4>\n
<!DOCTYPE html>\n<html>\n <head>\n <title>Personal Blog<\/title>\n <\/head> \n <body>\n <header> \n <h1>Your Personal Blog<\/h1>\n <nav>\n <a href=”domain.tld\/home”>Home<\/a>\n <a href=”domain.tld\/blog”>Blog<\/a>\n <a href=”domain.tld\/about”>About<\/a>\n <\/nav>\n <\/header>\n <main>\n <div class=”row\">\n <div class=”post-text-box”>\n <h1>Newest Post<\/h1>\n <section>\n <h1>First Post<\/h1>\n <p>The first post’s content<\/p>\n <\/section>\n <\/div>\n <div class=”profile”>\n <h1>About Me<\/h1>\n <img src=”profile-picture.png”>\n <p>About the author<\/p>\n <\/div> \n <\/div> \n <\/main>\n <footer>\n <a href=”twitter.com\/author”>Twitter<\/a>\n <a href=”facebook.com\/author”>Facebook<\/a>\n <a href=”instagram.com\/author”>Instagram<\/a>\n <\/footer>\n <\/body>\n<\/html><\/pre>
![\"A](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/03\/A-website-written-only-with-HTML.png\/public\")
<\/a><\/figure>6. Include Layout CSS<\/h3>
<link rel=\"stylesheet\" href=\"style.css\"><\/pre>
\/*header style*\/\nheader {\n text-align: center; \n padding: 20px;\n}\n\/*navigation menu style*\/\nnav {\n text-align: center;\n word-spacing: 30px;\n Padding: 10px;\n}\n\/*creating the two-column layout*\/\n*{\n box-sizing: border-box;\n}\n.row {\n display: flex;\n flex-wrap: wrap;\n}\n.post-text-box {\n flex: 70%;\n padding: 20px;\n}\n.profile {\n flex: 70%;\n padding: 20px;\n}\n\/*profile image and heading style*\/\n.profile img {\n width: 120px;\n display: block;\n margin-left: 0;\n margin-right: 0;\n}\n.profile h1 {\n text-align: center;\n}<\/pre>![\"A](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/03\/A-website-with-CSS-layout.png\/public\")
<\/a><\/figure>Suggested Reading<\/h4>\n
7. Customize Your Site<\/h3>
\/*navigation bar style*\/\nnav {\n text-align: center;\n word-spacing: 30px;\n padding: 10px;\n background-color: #f5f5dc\n font-family: Helvetica;\n \n}\n\/*navigation bar button style*\/\nnav a {\n color: #000000;\n text-decoration: none;\n font-size: larger;\n}<\/pre>![\"An](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/03\/An-HTML-website-with-CSS-layout-and-styling.png\/public\")
<\/a><\/figure>8. Choose a Hosting Platform and Publish<\/h3>
![\"Hostinger](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/Web-hosting_in-text-banner.png\/public\")
<\/a><\/figure>\n
Tips on Optimizing an HTML Website<\/h2>
![\"A](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/03\/Screenshot-2023-03-17-at-17.02.56.png\/public\")
<\/a><\/figure>Do I Need to Learn HTML to Build a Website?<\/h2>
Suggested Reading<\/h4>\n
![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/Website-Builder_in-text-banner.png\/public\")
<\/a><\/figure><\/div>Conclusion<\/h2>
\n
<\/a><\/figure><\/div>Making a Website With HTML FAQ<\/h2>
Is HTML Enough to Create a Website?<\/h3>
Use CSS to style the HTML element, like changing the background color and font size. To create a dynamic and interactive website, you also need PHP.<\/p> <\/div> Is HTML Good for Creating Websites?<\/h3>
However, HTML is only suitable for complex websites if paired with CSS and JavaScript. If you’re only learning HTML, it’s better to use WordPress.<\/p> <\/div> How Long Does It Take to Code an HTML Website?<\/h3>