|Internet & Web Development ( Introduction | Advanced )|
|Overview||Personal Learning Environment | What is HTML? | Web authoring | Resources | Help Desk|
|Creating a basic web site||HTML editor | Basic tags | Head tag | Linking pages | Formating and lines | Lists | Tables | Special characters | Page icon|
|Multimedia||graphics and images | Connected media | Audio | Video | Image map|
|Cascading style sheets||Inline, embedded, linked | Language | Example|
|Web page layout||Tables | CSS | iFrame | Frames | Other | Responsive|
|Forms||Example | mailto | Add Google|
: Creating your first web page
By the end of this page you will be able to:
Task: Create a simple web page
Using notepad create the following web page. (replace the ** with your name)
And save as one.htm in a suitable sub-directory (e.g. FirstSite) on your hard drive.
Notes on html structure
- Every web page starts with an <html> tag and ends with </html>
- The <head>.. </head> area is used to put information relating to the web page, for example the page’s title.
- The <body> ..</body> area is used to put the stuff you want to display in the web browser.
- HTML doesn’t require the <p> tag to have a </p> closing tag, but for XHTML this is required (In fact many browsers can ignore most tags and are very forgiving... but .. if you want to develop web pages that will work in the future it is best to get used to the XHTML standard).
- Do you have to layout HTML as shown in the examples? Actually no, you can put an entire HTML file into one line! We layout the page to help humans read the code. So the following is the same (from a computer's perspective) as above
Change one.htm to
- world is now in bold, and "Live long .." is on a new line.
- What happens if you delete the </p> at the end of the Hello world line and <p> before "Live long .."?
- By default <p> causes a double line spacing.
- As well as bold, there is the <i> - italic and <u> - underline tags. You should avoid the use of the underline tag as in html this usually signals a hyperlink (link to another page).
Headings are easily placed in an html file using the heading tag. For example; modify your web page one.html to..
Experiment with the other heading tags <h3> to <h6>.
If you are markup that may be difficult to follow, it is a good idea to include explanatory comments You can add comments to your html file using the !- tag. For example
A comment may extend over more than one line: For example