VirtualMV/HTML/Basic/Basic tags
| 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 | |
| Framework | Tours of Hawke's Bay | |
| Forms | Example | mailto | Add Google | |
| Misc | ||
Overview
|
: Creating your first web pageBy 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)
<!DOCTYPE html> <html> <head> <title>**’s first page</title> </head> <body> <p>Hello world</p> </body> </html>
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
<!DOCTYPE html><html><head><title>**’s first page</title></head><body><p>Hello world</p></body></html>
Paragraph and basic font tags (bold, italic)
Change one.htm to
<!DOCTYPE html> <html> <head> <title>**’s first page</title> </head> <body> <p>Hello <b>world</b></p> <p>Live long <i>and prosper</i></p> </body> </html>
- Notes
- 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).
Heading tags <h1> .. <h6>
Headings are easily placed in an html file using the heading tag. For example; modify your web page one.html to..
<!DOCTYPE html> <html> <head> <title>**’s first page</title> </head> <body> <h1>**’s web</h1> <p>Hello <b>world</b></p> <h2>Favourite quotes</h2> <p>Live long and prosper</p> </body> </html>
Experiment with the other heading tags <h3> to <h6>.
Comments
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
<!-- This is a comment -->A comment may extend over more than one line: For example
<!-- This is a comment extending over more than one line -->
Note that this has also been "borrowed" to enable Scripting (JavaScript and VB Script) to be included in an html document while still being readible in old browsers.
References
|
virtualMV | Superquick wiki guide | Please give me some feedback |
VirtualMV/HTML/Basic/Basic tags. (2024). In WikiEducator/VirtualMV wiki. Retrieved November 21, 2024, from http:https://wikieducator.org/VirtualMV/HTML/Basic/Basic_tags (zotero)
|
