BASIC HTML CODES TAGS Hypertext Markup Language Platform

BASIC HTML CODES & TAGS Hypertext Markup Language

Platform: - Independent � This means it can be interpreted on any computer regardless of the hardware or operating system.

CREATING AN HTML PAGE HTML: - Hypertext Markup Language � This is a type of computer language used to create Web Pages. � It is commonly known as HTML Code.

HTML � HTML is an abbreviation of Hyper Text Markup Language � Hyper Text implies that the links in one document connect it to another document � Markup implies that texts are edited in some way to better their appearance � Language is a set of instructions for a computer

TWO METHODS IN WRITING HTML CODE � 1. HTML code written in plain text editor, such as Notepad � 2. HTML editor, which is a program that will write the code for you. Front. Page, Microsoft Expression

HTML TAGS � HTML codes are also referred to as HTML tags. � The first tag that the beginner needs to become familiar with is the <HTML> tag. � This tag sets the beginning of the hypertext document.

� The </HTML> tag sets the end of the hypertext document, this is the last tag of the document. � Within these container tags there are two positions of a web page: A header and a body.

� These tags are enclosed by the lesser than < and greater than > brackets. � They are usually paired to indicate the start and end of an instruction.

HTML TAGS � The opening bracket is followed by an element � This � It element is a browser command ends with a closing bracket. � The tags can be written in capital or lower case letters.

HTML TAGS � Start of the instruction has the tag and element . element may be followed by attributes � Attributes are words that describe the properties of the element � It gives the instruction to the browser

Example of an attribute Attributes are only contained in the opening of the HTML tags to the right of the element They are separated by a space and followed by equal = sign.

� The � It value follows the equal sign is enclosed in quotes � .

� End of the instruction – the tag with a forward slash (</>) and the element </body> � IE: <body> Welcome to my Web Page </body>

IMPORTANT NOTE: that a tag should not have any spaces between the opening bracket and the element. � Remember �IE: <body> this is correct < body > this is not correct

HTML � HTML is interpreted and viewed by a WEB BROWSER such as Internet Explorer or Google Chrome � HTML documents are plain text files and can be created using any text editor one of which is NOTEPAD

HTML TAGS � The first tag that the beginner needs to become familiar with is the <HTML> tag. � This tag sets the beginning of the hypertext document. � The </HTML> tag sets the end of the hypertext document, this is the last tag of the document. � Within these container tags there are two portions of a web page: a header and a body.

THE HEADER � The header contains information about the page that is not displayed in the browser. � This information would include TITLE, META tags for proper Search Engine indexing, STYLE tags, � This will determine the page layout and Java. Script coding for special effects.

THE TITLE � <TITLE> - The TITLE of your web page. � This will be visible in the title bar of the viewers’ browser. � The next set of tags is the <HEAD></HEAD> which should contain the <TITLE></TITLE> tags.

� Write the title of your masterpiece within the title tags; the code for the title of this page for example, looks like this � <TITLE>Using HTML to write a Web Page</TITLE> � When you upload your next web page notice how the title is displayed in your browser

THE BODY � The body is a container tag which contains information about how the page will display in your browser � This is where you will begin writing your document and placing your HTML codes. � <body bgcolor=“#000000”text=“#ffffff”link=“#0000 ff”vli nk=“#ff 00 ff”>

� The code tells the browser to have a �black (#000000) background and white(#ffffff) text with blue(#0000 ff) links that turn purple (#ff 00 ff) after they have been visited.

BASIC HTML CODING <HTML> begins your HTML document <HEAD> contains information about the page <TITLE> The title of your page </TITLE> closes the HTML <TITLE> tag </HEAD> closes the HTML <HEAD> tag <BODY> this is where you begin placing your HTML codes. </BODY> closes the HTML <BODY> tag </HTML> closes the <HTML> tag

HOW TO DECIDE WHAT HTML CODES TO USE � If the HTML code do no enhance your web page, it is probably best to leave it out. � It is important to remember that the more special effects you add to your web page, the longer your web page will take to load.

� You should also ensure that the effect you are trying to achieve does not irritate your visitors. � Using excessive pop up windows, frames and placing scrolling test within the status bar can irritate your visitor, causing them to leave your web page and never return.

ADDITIONAL HTML TAGS HEADINGS � <h 1>This is a heading</h 1> � <h 2>This is a subheading</h 2> � <h 3>This is a sub-subheading</H 3> � You can use up to <h 6></h 6>

PARAGRAPHS � At the beginning of each paragraph you should use the tag. � It may be used with a but not necessarily. � Thus it may be a container tag but 1 used it as a separator tag.

CENTERING TEXT � The <center> tag enables you to center text. You put the <center> tag before the text you want entered, and the </center> tag after you’re done. � HEADING � IE: <center><h 1>Welcome to my second Web Page</h 1></center>

HORIZONTAL LINE � This will insert 3 horizontal lines of different thickness and length � The <hr>tag stand for horizontal rule <hr size=4 width=70%> <hr size=3 width=40%> <hr size=2 width=10%>

LINKS � <a href=“URL”>text of link</a> � URL Universal Resource Locator, contains the protocol http, ftp, etc… for locating the particular document the text of the link (visible to the user) goes after the > and before the </a>

SAMPLE WEB PAGE � Open up Notepad � Type in the above codes � Save it in your webmaster folder � Remember to save the extension as yourname. Web. Page 2. html �Remember no spaces in the name of your html.

SAMPLE WEB PAGE � Your 2 nd web page should include: �A centered heading ○ Use <head> and <center> tags �A paragraph of text in the body ○ Use <body> and tags �At least 2 horizontal lines of different size ○ See previous slides �At least 1 hyperlink to another site ○ Use <a href> tag

PRACTICE HTML � Go to http: //www. w 3 schools. com/html/default. asp � Try some of the HTML Tutorials given (save for future reference) � These will be helpful when you start your website!!

NOTEPAD AND ACCESSING IT � This is a text editor that comes with Windows. � How to access Notepad �Start by selecting Programs from the start menu �then selecting – Accessories �Scroll down and find the program Notebook �Create a shortcut to your desktop

WORKING IN NOTEPAD � Establishing background color, text color, link color, and vlink color. � Background (red), text(white), link(blue), and the vlink(purple) � <body bgcolor=“#f 0000 f”text=“#ffffff”link=“#000 0 ff”vlink=“ff 00 ff”>

TEST YOUR PAGE � Open up INTERNET EXPLORER � Select FILE from the menu bar �(if FILE is not there, right click next to the menu bar, select the MENU BAR) � Select browse (you have to select the right directory where you saved your html file)