Web Design using HTML
A website is a collection of web pages having managed contents related to the website. Content can be any digital media like audio, video, image, article or any information. Each website has its own URL and IP address that it used as its identity over internet
Structure of an HTML Webpage
The HTML5 web page starts with type and version of html used in the Web page coding. This is not html tag. All the html coding is enclosed within <html>…</html> tags. The <html> tag consist of two main sub tags <head>…</head> and <body>…. </body>. <head> tags include information relevant to web browsers and search engines. Code mentioned in head tags is for information purpose and will not be displayed. <body> tags contain content that will be displayed on web browser.
<!DOCTYPE HTML > <HTML> <HEAD> <TITLE> MY TITLE </TITLE> </HEAD> <BODY> ………… </BODY> </HTML>
The html code written in editor must be saved with an extension “.html” to make it an html webpage.
Every tag in HTML5 have their own attributes. An attribute add feature to the tag. It is used within the tag. It gives additional information about the tag. An attribute has 2 parts: name and value. Name is the value that we want to set and value is value of the property that we want to set.
<tagname attribute= “value”>
<! DOCTYPE HTML> <HTML> <HEAD> <TITLE> HTML ATTRIBUTE SETTING</TITLE> </HEAD> <BODY BGCOLOR= “WHITE”> <P> SETTING THE BACKGROUND COLOUR </P> </BODY> </HTML>
Here “bgcolor” is the name of the attribute and “white” is the value of attribute bgcolor that we are setting. This will set the background colour of body tag as white.
There are 4 common attributes that is used by almost all html elements: id, class, title, style.
Html element it an individual component of html webpage that creates a tree of html tags. When any element tag starts, it must contain its closing pair.
<! DOCTYPE html> <html> <head> <title> example of html element</title> </head> <body>…<div>… <p>this is an example of <b>html </b>element</p> …</div>….</body> </html>
HTML5 tags are of two types :
HTMLor HTML5 tags are of 2 types: Container tags, Empty tags.
- Container tags are those that need opening as well as closing tag to work properly. For example, <html></html>, <body></body> etc.
- Empty tags are those that doesn’t require closing tag. For example, <br>, <img> etc.
Basic Html Tags
- Heading: This tag is used for setting different headings in the page. There are 6 different types of heading tags <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. It is a container tag so once it open must be closed.
- Line break: This tag is used for going to the next line. It is an empty tag. When <br> is mentioned anywhere in the line, it will break the line.
- Paragraph: This tag is used for making the text in paragraph format. <p> tag is a container tag. Anything written inside <p>….</p> will look in the form of a paragraph.
- Center: This tag is used to keep the content in the center. Anything enclosed in <center>…</center> will be aligned center.
- Anchor: <a> is anchor tag that is used for creating hyperlinks in the page.
- Division: <div>…</div> is division tag that defines a section in the document.
- Head: <head>…</head> tag defines the information about the document. Anything written inside the tag is not content to display.
- Body: <body>….</body> defines the body of the html page. It contains all the content to display in web browser.
- Title: <title>…</title>
- Html: <html>..</html> is the root tag. Any html code written for the webpage will be enclosed inside this tag.
- Image: <img> tag defines an image inside the webpage. It must contain an attribute src that tells the source of the image.
- Meta: <meta> tag defines the metadata of the html document.
- Table: <table>…</table> defines a table inside html webpage.
- Table Header: <th>…</th> tag defines the table header.
- Table Data: <td>…</td> tag defines the content of each cell in the table.
- Table Row: <tr>….</tr> tag defines the number of rows in the table.
- Unordered List: <ul>…..</ul> tag defines the list of unordered items. It contains bullets.
- Ordered List: <ol>….</ol> tag shows the orders list of items. It can be in numeric form, alphabetical form etc.
- List Item: <li>….</li> include the list item that is to show in the form of ordered list or unordered list.
Was this article Helpful? Must share your views in comment section below. For getting updates regarding our latest technology blogs, visit our Tech-Blogs.