Unit 1

Diplom

HTML tags

These are the commands enclosed in < >. Their purpose is to tell the web browser about the content and structure of a given webpage.
The visual appearance and layout of a webpage are taken care of by another set of tags called CSS (to be covered later).
Every webpage starts with the <html> tag and ends with the </html> tag.
<h1> This is an opening tag and tells the browser that a heading of size 1 (largest) starts here.
</h1>This is an closing tag and tells the browser that a heading of size 1 (largest) ends here.

Editing and saving webpages

Webpages are saved as .html documents and are essentially text files editable in any text editor (such as Notepad)
You edit the page in a text editor and preview it in a web browser.
You must save the text file as an .html file, for instance, "myfirstpage.html" (when using Notepad, choose "All Files", and enclose the file name in double quotes).
You can see the actual webpage in a a web browser by double-clicking the html file. This opens it in the default web browser.
If you wish to make a change to the page, flip back to Notepad (ALT+Tab) and make your changes. After you've made a change to the file, save it (CTRL+S) and the flip to the web browser (ALT+Tab), and refresh the page (F5) to see the changes you've made. You may want to nest the Notepad and web browser windows side-by-side (WINDOWS+left arrow, ALT TAB, WINDOWS+right arrow).

Tags we cover in this Unit:

<html>
<h1>....<h6> headings of different sizes
<br /> a line break (notice that this is a so-called orphan tag, it is both an opening and closing tag in one; there is a space between "br" and the slash)
<hr /> a horizontal line (another orphan tag)

Our first webpage:

Try typing up the text below in Notepad, save it as directed above, and then preview it in a web browser. Then try to change the text between the <h1> and </h1> tags as well as the sentence that says "I love HTML!", save it, preview in a web browser as directed above. Isn't HTML cool?

<html>

<h1> My first page in HTML</h1>

This is my very first webpage! <br />

I love HTML!

</html>

Unit 1 exercises:

Create HTML for a page that would look like this: (Remember, for headings, you use the <h1> ...</h1> for size 1, <h2> ...</h2> for size 2, etc.)

2. Create HTML for a page that would look like this (replace with your own text):

3. When done, you can check out this page on W3schools.

For those that are loving it, sign up for an account with Codeacademy; it will come in handy later on.

Page updated

Google Sites

Report abuse