 |
| Html Structure : Writing your First Web Page |
Html Structure in our last post we
explain what Html
Language is, how people access the
web, and how does the web works, if you haven’t read the post click here to
read. A lot of people dont know how to structure their HTML Pages.
Html: Introduction to Markup Language. Today we’re
gonna explain the Structure
of a Html Language, learning about
Markup and some Tags and Elements.
We come across all kinds
of documents every day of our lives. Newspapers, insurance forms, shop
catalogues... the list goes on. Many web pages act like electronic versions of
these documents. For example, newspapers show the same stories in print as they
do on websites; you can apply for insurance over the web; and stores have
online catalogs and e-commerce facilities. In all kinds of documents, structure
is very important in helping readers to understand the messages you are trying
to convey and to navigate around the document. So, in order to learn how to
write web pages, it is very important to understand how to structure documents.
So in this post you will understand.
·
How HTML describes the structure of a web
page
·
Learn how tags or elements are added to your document
· Write
your first web page
HOW HTML DESCRIBE THE STRUCTURE OF A WEB PAGE.
In the browser window you
can see a web page that features exactly the same content as the Word document
below to describe the structure of a web page, we add code to the words we want
to appear on the page. You can see the HTML code for this page below. Don't
worry about what the code means yet. We start to look at it in more detail on
the next page. Note that the HTML code is in blue, and the text you see on
screen is in black.
<html>
<body>
<h1>This
is the Main Heading</h1>
<p>This text might be an introduction to the rest of the
page. And if the page is a long one it might be split up into several
sub-headings.</p>
<h2>This is a Sub-Heading</h2>
<p>Many long articles have sub-headings so to help you
follow the structure of what is being written. There may even be
sub-sub-headings (or lower-level headings).</p>
<h2>Another Sub-Heading</h2>
<p>Here you can see another sub-heading.</p>
</html>
</body>
The HTML code (in blue) is
made up of characters that live inside angled brackets — these are called HTML
Elements. Elements are usually made up of two tags: an opening tag and a
closing tag. (The closing tag has an extra forward slash in it.) Each HTML
element tells the browser something about the information that sits between its
opening and closing tags.
In the above code, the
highlighted codes in blue are the Html Tags or Element; we have
the opening tags and the closing tag in which the Document is shown in the
browser. Tags are added at the beginning and ending of each sentence as you can
see above.
STRUCTURE OF HTML TAG
Structure of a Html Tag
looks like the explanation below, let’s look at the structure of a P Tag which
is paragraph tag.
<P>
Left-angle
bracket RIGHT-angle
X
(less-than sign) MORE-than sign)
The character or letter in the bracket indicates the
tag’s purpose. As seen above the character stands for paragraph. In the closing
tag there is a slash after the left-angle bracket. See below for example:
</P>
Left-angle
bracket RIGHT-angle
X
(less-than sign) MORE-than sign)
As seen above the slash is after the left-angle
bracket which is the less than sign.
WRITING YOUR FIRST WEB PAGE
Yes we’re going to write
our first Html Web Page, to write our first Html Page we will introduced
the structure of Html Page which is explain below:
<body>
You met the <body> element
in the first example we created. Everything inside this element is shown inside
the main browser window.
<head>
Before the <body> element you will often see <head> element. This
contains information about the page.
<title>
The content of the <title> element are either shown at the top of
the browser, above where you usually type in the URL of the web page you
want to visit, or on the tab for that web page.
Ready we have started
coding……
CONCLUSION
We have explained the full
details on Html
Structure in the below tutorial. If
you have any question feel free to ask, comment, like and share to your friends.
html paragraph font size code examples
ReplyDeleteP paragraph tag font-family font-size
ReplyDeleteThanks for sharing all the information with us all.
Full Stack Online Training