Articles >Computers and Internet

HTML Tutorial Part 1

A beginners guide to creating a web page from scratch. Includes common tag names and usage.

amazing
amazing | 30 Jul 2020
Revised 30 Jul 2020
1877 views |


Rate This Article:
?

Log in for more options.





Credit
SEO Word Cloud on Wood

HTML is the standard for writing web pages that appear on in your web browser on the internet.  Basic html is easy to write and can be written without having a web site or access to a server.  To get started learning to write HTML create a text file on your computer with a .html file extension. To edit your file you need to open it with a text editor, to view it as a web page you should open it with a web browser.

 

Basic HTML Tags

Most Tags in HTML have a beginning tag and an ending tag.  Tags are key words enclosed in less than "<" and greater than ">" signs.  The ending tag also contains a forward slash after the less than sign


Doctype - Doctype specifies the standard or particular version of HTML you will be using.  We will use the HTML5 doctype tag which is <!DOCTYPE>.  The doctype tag does not require a closing tag

HTML Tag - This tag is the main container for all code in our web page. The html tags look like this <html> and </html>

Head Tag - The head contains information about the web page such as the title, JavaScript code, css markup and other information related to the web page. The head tags look like this <head> and </head>

Title Tag - The title tag is placed inside the <head> </head> tags.  The text placed inside of the <title></title> tags will appear in the web page's tab.

Body Tag - The body contains the html markup, which is primarily the viewable elements of the web page.  The body tags are written like this <body> and </body>.

Comments - Comments are notes the web page author makes to document their work or provide information.  Comments are not visible in the web browser.  Comment tags appear different than other HTML tags.  You add comments to a web page using these specialized comment tags <!-- and -->

Basic Page Example

<!DOCTYPE>
<html><head>
<title>Webpage Title</title>
</head>
<body>
<!-- Comment: Your content will go here -->
</body></html>

 

Structural Elements

Structural elements help you keep your page organized by separating content into sections and containers such as navigation sections, headings, paragraphs, menus footers and images and dynamic content.

DIV - The div tag is used to divide a page into sections and containers. Divs can be nested, meaning you can have Divs inside of other divs.  Divs are a block element, meaning they naturally drop down below one another in a page.  As a block element it can contain other block or inline elements

SPAN - The span tag is similar to the div in that it is simply a container, however it is an inline element and can contain other inline elements, but cannot contain block level elements.  They naturally flow from left to right. 

IMG - The image tag is a container for images. the src (source) attribute is used to specify the image file's location.

A - The Anchor tag is used to create links or references.  These can be either on page references or links to other pages and sites.  The destination URI is placed in the href attribute.

P - The paragraph element is used to break text into a paragraph.  Your text should appear inside of the <p></p> tags. the paragraph tag will separate the paragraph from items above and below it.

Example:

<!--Place this inside the <body></body> tags of your web page-->
<div>
<span><a href="http://www.earnwrite.com" title="Link to Earnwrite">Earnwrite</a></span>
<span><a href="http://www.earnwrite.com" title="Link to Earnwrite">Earnwrite</a></span>
</div>
<p>This is an example paragraph containing text to demonstrate the effect of placing text inside html paragraph elements.</p>
<div>
<span><img src="document.gif" title="link to document image"></span>
<span><img src="document.gif" title="link to document image"></span>
</div>

Summary

After learning these basics of a web page you are ready to learn about additional HTML elements, HTML form elements, JavaScript and CSS to improve your ability to design web pages and web sites.


Article Tags

html html5 doctype webpage build a webpage website how to write a webpage

Related Articles

articleHow to Build a Website with Notepad or other Free Text Editors
by homeandauto | in Computers and Internet | 2063 Views
Describes what you need to know to build a webpage in software you already have

More Articles By amazing

articleHTML Tutorial Part 1
by amazing | in Computers and Internet | 1878 Views
A beginners guide to creating a web page from scratch. Includes common tag names and usage.

articleHTML CSS American Flag
by amazing | in Computers and Internet | 6677 Views
This article shows how to create and American Flag usinng only HTML and CSS

articleBest Non-Candy Alternative Halloween Treats Kids Will Love
by amazing | in Events and Holidays | 4764 Views
If you prefer to avoid giving out Candy for Halloween check out this list of Non-Candy gifts for Halloween

All Articles By amazing

Login to enter comments.

Comments (0):

There are no comments for this article yet.

Add a Comment

You must Login to enter comments.