January 30, 2024 by admin

HTML/CSS Reference for DMET 155/355

Directory
Basic Directory Structure for a Static Site
<!DOCTYPE html>
<html>
<body>
    This is my first web page
</body>
</html>

The first line on the top, <!DOCTYPE html>, is a document type declaration that lets the browser know which flavor of HTML you’re using (HTML5, in this case).

<html> the opening tag kicks things off and tells the browser that everything between that and the </html> closing tag is an HTML document. The stuff between <body> and </body> The document’s main conten twill appear in the browser window.

HTML Tag: html

A web page’s root element. The big daddy. The ancestor of all elements. The element that wraps its arms around all other elements.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>The Title of the Page</title>
    </head>
    <body>
        <!-- content -->
    </body>
</html>

Elements

Tags tend not to do much more than mark the beginning and end of an element. Elements are the bits that makeup web pages. You would say, for example, that everything that is in between (and includes) the <body> and </body> tags is the body element. As another example, “<title>” And “</title>” are tags, “<title>Rumple Stiltskin</title>” is a title element.

Attributes

Tags can also have attributes, which are extra bits of information. Attributes appear inside the opening tag and their values sit inside quotation marks. They look something like <tag attribute="value">Margarine</tag>. We will come across tags with attributes later.

Once again, quotation marks aren’t always essential but it is a good-practice convention HTML Dog uses for consistency and clarity. We suggest you do the same.

Elements

Tags tend not to do much more than mark the beginning and end of an element. Elements are the bits that make up web pages. You would say, for example, that everything that is in between (and includes) the <body> and </body> tags is the body element. As another example, whereas “<title>” and “</title>” are tags, “<title>Rumple Stiltskin</title>” is a title element.

<title>” and “</title>” are tags, “<title>This is the title of the page</title>” is a title element.

HTML Tag: head

Where metadata — information about the document — is placed. It should be the first element inside an html element.

A title element is required within the head element. meta, style, base, link, and script can also be used.

head is required and it should be used just once. It should start immediately after the opening html tag and end directly before the opening body tag.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is the title of the page</title>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
        <!-- content -->
    </body>
</html>

Page Titles

All HTML pages should have a page title.

To add a title to your page, change your code so that it looks like this:

We have added two new elements here, that start with the head tag and the title tag (and see how both of these close).

The head element (that which starts with the <head> opening tag and ends with the </head> closing tag) appears before the body element (starting with <body> and ending with </body>) and contains information about the page. The information in the head element does not appear in the browser window.

<!DOCTYPE html>
<html>
<head>
    <title>My first web page</title>
</head>
<body>
    This is my first web page
</body>
</html>

HTML Tag: body

The main content area of an HTML document.

You must use this element and it should be used just once. It should start immediately after the closing head tag and end directly before the closing html tag.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Content</title>
    </head>
    <body>
        <!-- Content -->
    </body>
</html>

Paragraphs

Now that you have the basic structure of an HTML document, you can explore content a bit.

Go back to your text editor and add another line to your page:

<!DOCTYPE html>
<html>
<head>
    <title>My first web page</title>
</head>
<body>
    This is my first web page
</body>
</html>

Look at the document in your browser.

You might have expected your document to appear as you typed it, on two lines, but instead you should see something like this:

This is my first web page How exciting.

This is because web browsers don’t usually notice what line your code is on. It also doesn’t take any notice of spaces (you would get the same result if you typed “This is my first web page”.

If you want text to appear on different lines or, rather, if you intend there to be two distinct blocks of text (because, remember, HTML is about meaning, not presentation), you need to state that explicitly.

Change your two lines of content so that they look like this:

<p>This is my first web page</p>
<p>How exciting</p>

The p tag is used for paragraphs.

Look at the results of this. The two lines will now appear on two lines because the browser recognizes them as separate paragraphs.

Think of the HTML content as a book – with paragraphs where appropriate.

Assignment

  • 1. Create an HTML page using the above code. Remember to use all the examples in this exercise.
  • html
  • head
  • title
  • body
  • h1
  • p
  • h2
  • ul
  • ol
  • li
  • a
  • strong

CSS

  • Use a wrapper to contain the content you create.
  • Use any other CSS you learned in class to enhance your HTML page.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29