Web Page Development
Introduction
Introduction to Hypertext Markup Language. HTML
HTML works in a very simple, very logical format. It reads like we do, top to bottom, left to right. That’s important to remember. HTML is a Mark Up language. It is not a programming language you couldn’t add 2+2 for instance. Programming languages do things with information whereas HTML just displays information. HTML is written with TEXT. What you use to set or make certain text bigger, smaller, in bold or in underline is a series of tags. Think of TAGS as commands. Lets say you want a line of text to be bold, you will put a tag at the point you want the bold lettering to start and another tag where you want the bold lettering to end of the word. All tag formats are the same. They begin with a less than sigh < and end with a greater than sigh > Basic Structure. Begin a new web document by giving it a Skeleton. There are really only two parts to an HYML document. The Head and the Body. The head contains information about the document, its title for instance. The body contains the actual content of the document. The structure of the document is identified by using the and container tags.
2 1 3
Andrea Carlin
1
Web Page Development
Introduction
These Tags Must be in every page. ie the Skeleton of the page. 1. This tells us that this is the start of a HTML page This tells us that this is the end of the HTML page 2. This is the Header section of the page, it doesn’t appear on the page but it does things, for instance it helps the browser. This marks the end of the header section. 3. In this section it shows what actually appears on the page
4.
This tag goes in the <Head> section whatever is put in here appears on the top of the page.
Text Formatting Tags 1. Bold Tag <B> Andrea</B> This applies all text between the tags to be displayed in bold on the browser page. Also <Strong> Andrea </Strong> will do the same thing. So Andrea will be displayed as Andrea
2. Italic Tag <i> Andrea</i> This applies all text between the tags to be displayed in italic on the browser page. Italic Tag So here Andrea will be displayed as Andrea
3. Underline tag. <u> Andrea</u> This applies all text between the tags to be Underlined. So here Andrea will be displayed as Andrea 4. Horizontal Rule <hr> This tag puts a horizontal line across the page.
Andrea Carlin 2
Web Page Development
Introduction
You can use a combination of tags on text. <b><i> Andrea</b></i> this will display Andrea like this Andrea bold and italic. Blank space isn’t picked up by the browser, it will display the text straight after no matter how far down the page you go. In order to space sentences or text you must use the <br>tag. This inserts a line break so it’s the same as pressing the return key on the keyboard. Andrea Carlin Ballybofey will be displayed as Andrea CarlinBallybofey You need to use the <br> tag, Andrea Carlin<br>Ballybofey This will be displayed as Andrea Carlin Ballybofey. Another way to do this is to use the Paragraph tag Paragraph Tag <P> </P> tags form one paragraph. This paragraph will be set apart from all other material on the page by a line of vertical space both before and after the paragraph. Font Tags Font tags apply to page elements. This tag has attributes eg(size,color,face). <font Size=”7” Color=blue>Andrea face=”arial”</font/> This will display Andrea in a font size 7, in blue and in type arial.
Some tags have attributes Attributes go only in the opening container tag, the closing tag includes just the tag name, even if the opening tag is loaded with attributes The formula for using attributes is as follows: <tag attribute=”value”>affected text </tag>
Andrea Carlin 3
Web Page Development
Introduction
Most attributes take values, which follow an equal sigh = after the attribute name, The Value might be a number or a word You can add several attributes within a single tag. It is good practice to put quotation marks around values. The Font tag has attributes Color, face, size. So <Font Size=”7” Color=”blue” Face=”arial”>andrea carlin</Font> The paragraph tag<p> also has attributes <P Align=”Center”> </P> The <HR> tag also has attributes <HR WIDTH=”50%” SIZE=”6”> Here are a few more tags that we will need to become familiar with: Center tag <center> </center> centres the text on the page. Image tag <img src=”*******.gif”> this displays an image that you have saved on to your web page. As we saw it is very important that you make sure you add the path to where your image is. The Body attributes: Attributes can be added to the Body tag to set characteristics of a page. The Background attribute can consist of an image or a colour. To use an image as a background include the attribute BACKGROUND=”filename” inside the opening <body> tag. <Body Background=”Background.gif”> To use a solid colour as a background to your page use the following. <Body BGCOLOR=”BLUE”> This is similar to using an image , but the difference is we use a solid background colour, because of this the the attribute name is BGCOLOR instead of BACKGROUND.
Andrea Carlin
4
Web Page Development
Introduction
Practical 1
Steps involved in creating a HTML Page. 1. Use Notepad create new document. 2. Go to File option on menu bar – Always use “Save As” option. 3. Save as type – All Files – use drop down menu to get this option. 4. Save file as .html eg First.html 1. Begin by typing the following code in Notepad. <HTML> <HEAD> <TITLE>Title goes here This is the body of the web page and anything included in this section will be viewed through the browser window.
2. Save the document as first.html on your x:\ drive in your HTML Folder. 3. Reopen the file first.html Put “first web page” in the title tag 4. Type your name in the main body tag. Use the bold tag, italic tag underline tag 5. View changes in Internet Explorer 6. Next type in your name and address 7. View this in Internet Explorer 8. Use the
tag to display your address on the following line.
Andrea Carlin
5
Web Page Development
Introduction
Practical 2
1. Create a web page and call it index.html and begin by typing the following paragraph in the body section of the page.
Section 1 Domain Names
So what is a domain name? A domain name is just an officially recognized chunk of text that points to an IP on a computer somewhere on the Internet.
When you purchase a domain name , you get to tell the world what your domain should point to
. As long as you are listed as the administrative contact, you decide where the domain should go.
2. Save changes and view page in Internet Explorer.
Andrea Carlin
6