Design a Web Page Using HTML & CSS

Learn HTML(Hypertext Markup Language) programming language by creating a web page or writing a simple paragraph or an essay or an article, etc. All we need to use is HTML elements and a text editor.
This post is for absolute beginners. Even if you don't know how to write code, it won't be a problem. All you need is patience.
Remember, the computer is not a human or a magician. You have to tell it what to do, where to start, where to end, what is the text for that you typed right now, I mean everything.
<h2>How to write HTML code</h2>
To write HTML code for the first time I recommend you use your default text editors like Notepad(Windows) or TextEdit(Mac) or Text Editor(Ubuntu).
Now open up your text editor and paste the code from below. Don't get bored just by watching the code, I will try my best to explain what those are.
<pre><code class="language-html">&#x3C;!DOCTYPE html>
&#x3C;html>
 &#x3C;body>
 &#x3C;h1>This is the Headline of the paragraph&#x3C;/h1>

 &#x3C;p>Here goes the whole description of the paragraph&#x3C;/p>
 &#x3C;/body>
&#x3C;/html>
</code></pre>
Next, You have to save the file to your computer.
For Notepad got to File > Save as or for Text Editor just click on Save, It will popup an explorer window to select where to save your file.
Select any folder where you want to save, name that file index.html with "UTF-8" encoding selected option and click on Save.
Now open the file in your internet browser by double-clicking on it or drag and drop the file on your browser. You will see something like below:
<img src="/images/open-html-file-in-browser.png" alt="HTML File Preview In Browser">
We learned how to create an HTML file and preview it on the browser. Now it's time to explain what the code was. Let's start one by one.
<h2>What is doctype in HTML?</h2>
We used <code>&#x3C;!DOCTYPE html></code> at the very beginning of the code. It's not related to the paragraph you wrote. It just tells the browser that this is an HTML file and the browser preview the file as HTML.
Also DOCTYPE is not case sensitive. You can use <code>&#x3C;!Doctype></code> or <code>&#x3C;!doctype></code> etc.
<h2><code>&#x3C;html></code> tag in HTML</h2>
The <code>&#x3C;html></code> tag contains all the HTML tags we write in HTML.
If you look at the code you will see every tag like <code>&#x3C;body></code>, <code>&#x3C;p></code> are in the middle of the <code>&#x3C;html>...&#x3C;/html></code> tag. This is where we will write our all HTML code.
<h2>Why every HTML tag has a duplicate tag with a slash('/') in the end?</h2>
When you write an article, you know this is the end of my article headline, after that, You will write the description of that paragraph.
But the computer doesn't know that this should be the end. You have to tell it to stop recognizing as heading after the word of your article headline with the end tag.
The end tag starts with a slash("/") to represent the end of the tag. For example <code>&#x3C;html></code> has an end tag like <code>&#x3C;/html></code>.
<h2>Body tag in HTML</h2>
<code>&#x3C;body></code> tag contains all elements of the document's body like your body contains your eyes, hair, hands, etc.
You might be wondering then what is the use of the <code>&#x3C;html></code> tag if the body contains all the elements. <code>&#x3C;html></code> contains the head tag(i.e., CSS stylesheets, Metadata, etc.) like the brain in your head.
<h2>What is the meaning of nested elements in HTML?</h2>
By nested we mean is to put a piece of information, text, etc. inside another.
If you look at the code you will see the <code>&#x3C;body></code> tag is stored inside the <code>&#x3C;html></code> tag.
So you can call the <code>&#x3C;body></code> element is a nested element. You can also call the <code>&#x3C;html></code> element as a container.
<h2>What is h1, h2, h3, h4, h5, h6 in HTML?</h2>
Those are called HTML Headings like titles or headlines or sub-headlines of a paragraph or article.
<code>h1</code> is the bigger and the important one, <code>h2</code> is less big and important than <code>h1</code> which we use after <code>h1</code>. <code>h6</code> is the last and the smallest one. Most of the time, They play the role of subtitles under the <code>&#x3C;h1></code> tag.
Let's change the code with different headings like the code below and save.
<pre><code class="language-html">&#x3C;!DOCTYPE html>
&#x3C;html>
 &#x3C;body>
 &#x3C;h1>This is Heading One&#x3C;/h1>
 &#x3C;h2>This is Heading Two&#x3C;/h2>
 &#x3C;h3>This is Heading Three&#x3C;/h3>
 &#x3C;h4>This is Heading Four&#x3C;/h4>
 &#x3C;h5>This is Heading Five&#x3C;/h5>
 &#x3C;h6>This is Heading Six&#x3C;/h6>

 &#x3C;p>Here goes the whole description of the paragraph&#x3C;/p>
 &#x3C;/body>
&#x3C;/html>
</code></pre>
Click on the refresh button on your browser, see if it's like the screenshot below.
<img src="/images/Html-Headings-example.png" alt="HTML Heading Example">
<h2>Paragraph(<code>&#x3C;p></code>) tag in HTML</h2>
<code>&#x3C;p></code> tag defines a paragraph like the description of a paragraph after the headline. It displays normal plain text in the browser as you saw in the screenshots.
Now, what if you want to add another paragraph after a paragraph to make a new line. Well, all you have to do is add another <code>&#x3C;p></code> tag. It will add a new line.
Update your code like below and save the file. Always remember one thing that whenever you change or update your code you have to hit Save and click the refresh button on your browser to see changes. Because the browser doesn't know that you have edited your file.
<pre><code class="language-html">&#x3C;!DOCTYPE html>
&#x3C;html>
 &#x3C;body>
 &#x3C;h1>Title of the Paragraph&#x3C;/h1>

 &#x3C;p>
 Magnis eleifend aenean condimentum est sodales purus sagittis duis
 parturient nulla vulputate cubilia, eget urna natoque dictum etiam eros
 convallis bibendum rhoncus egestas. Nisl platea aliquam lacus ridiculus
 odio fringilla lacinia urna phasellus ornare, ultricies condimentum
 praesent luctus pretium convallis placerat tempor. Id vivamus vitae
 lobortis in suscipit aenean diam sociosqu commodo non lacinia, dui mi
 integer hendrerit nisl habitant cubilia nibh fames nunc. Lobortis semper
 cubilia morbi tristique vestibulum, per nulla mi euismod inceptos nibh,
 convallis id varius quis. Sollicitudin pellentesque himenaeos sed proin
 habitant gravida, metus etiam eu blandit potenti primis vehicula, molestie
 nascetur duis bibendum commodo. Pretium ut turpis id bibendum magnis ad
 iaculis leo, tempus facilisi fringilla varius velit inceptos vel est,
 himenaeos urna a lacinia conubia quisque nulla. Ante parturient commodo
 nunc in leo quam imperdiet euismod, dictum etiam morbi fermentum quis ad
 pellentesque porttitor scelerisque, sociosqu ultrices nam at hac molestie
 dapibus.
 &#x3C;/p>

 &#x3C;p>
 Lorem ipsum dolor sit amet consectetur adipiscing elit integer, magna
 consequat nostra magnis commodo quis praesent. Lobortis nostra aliquam
 quam ac platea nam at ut tempor conubia cubilia etiam sociis neque cras,
 lectus sodales venenatis nunc molestie iaculis mus dignissim aenean mauris
 magnis mi feugiat. Posuere odio per aenean torquent litora feugiat potenti
 duis mollis eu, metus condimentum ut taciti vestibulum non mauris
 malesuada a facilisi, tellus tempus vivamus mattis nostra nullam turpis
 euismod pretium.
 &#x3C;/p>
 &#x3C;/body>
&#x3C;/html>
</code></pre>
I added some random text as an example. Try to change the text or add a new <code>&#x3C;p></code> tag to practice HTML.
<img src="/images/Final-Paragraph.png" alt="Final Paragraph">
<h2>How to change the text of the browser tab name or title?</h2>
Right now, in the browser tab name, your file name is displaying. But what if you want to display your article headline or add a document title. Let's do that.
We will have to use <code>&#x3C;head></code> tag like we were using <code>&#x3C;body></code> tag. Unlike <code>&#x3C;body></code> tag the <code>&#x3C;head></code> tag contains document's <code>&#x3C;title></code>, <code>&#x3C;meta></code> tags etc.
<code>&#x3C;title></code> tag represents the title of the document. So, We are going to use the <code>&#x3C;title></code> tag.
Add the <code>&#x3C;title></code> tag in your code like the code below.
<pre><code class="language-html">&#x3C;!DOCTYPE html>
&#x3C;html>
 &#x3C;head>
 &#x3C;title>Here goes the title of the document&#x3C;/title>
 &#x3C;/head>
 &#x3C;body>
 &#x3C;h1>Title of the Paragraph&#x3C;/h1>

 &#x3C;p>...&#x3C;/p>

 &#x3C;p>...&#x3C;/p>
 &#x3C;/body>
&#x3C;/html>
</code></pre>
<img src="/images/document-title-html.png" alt="document title html">
<h2>Conclusion</h2>
Try changing or adding new text, HTML tags to practice and learn more.
What I talked about HTML in this whole post was very basic of HTML. You will have to gradually learn other HTML elements one by one and how to group them and where should you use it or not things like that.
The complete HTML file can be found <a href="https://github.com/MejanH/web-design-html-css-tutorial/blob/web-page-with-html/index.html">here</a>.
Good Luck!
Related Article: <a href="https://alhaqi.com/blog/design-web-page-using-html-and-css">Design your HTML Web Page like other websites you see on the inernet</a>

Nav-Tree

#html

Design a Web Page Using HTML & CSS

Create a Web Page or Write an Article With HTML

No More Posts Available...