August 28, 2023 by admin

HTML/CSS Reference for DMET 155/355

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> is the opening tag that 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> is the main content of the document that will 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 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.

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
  • 2. Create an Index page. We will all make one. I will guide you through it.

Emphasis

You can emphasize text in a paragraph using em (emphasis) and strong (strong importance).

<p>That <em>is</em> interesting.</p>

Line breaks

The line-break tag can also be used to separate lines like this:


This is my first web page<br>
How exciting

There’s no content involved in breaking lines so there is no closing tag.

It could be tempting to over-use line breaks and br shouldn’t be used if two blocks of text are intended to be separate from one another (because if that’s what you want to do you probably want the p tag).

Lists

There are three types of list; unordered lists, ordered lists and definition lists.

Unordered lists and ordered lists work the same way, except that the former is used for non-sequential lists with list items usually preceded by bullets and the latter is for sequential lists, which are normally represented by incremental numbers.

The ul tag is used to define unordered lists and the ol tag is used to define ordered lists. Inside the lists, the li tag is used to define each list item.

<!DOCTYPE html>

<html>

<head>
    <title>My first web page</title>
</head>

<body>
    <h1>My first web page</h1>

    <h2>What this is</h2>
    <p>A simple page put together using HTML</p>

    <h2>Why this is</h2>
    <ul>
        <li>To learn HTML</li>
        <li>Apple</li>
        <li>This is an example of a sentence in a list</li>
    </ul>

</body>

</html>

If you look at this in your browser, you will see a bulleted list. Change the ul tags to ol and you will see that the list will become numbered.

Lists can also be included in lists to form a structured hierarchy of items.

Replace the above list code with the following:

<ul>
    <li>To learn HTML</li>
    <li>
        To show off
        <ol>
            <li>To my boss</li>
            <li>To my friends</li>
            <li>To my cat</li>
            <li>Hello to all my friends</li>
        </ol>
    </li>
    <li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</li>
</ul>

A list within a list. And you could put another list within that. And another within that. And so on and so forth.

Links

So far you’ve been making a stand-alone web page, which is all very well and nice, but what makes the Internet so special is that it all links together.

The “H” and “T” in “HTML” stand for “hypertext”, which means a system of linked text.

An anchor tag (a) is used to define a link, but you must also add something to the anchor tag — the link’s destination.

Add this to your document:

<!DOCTYPE html>

<html>

<head>
    <title>My first web page</title>
</head>

<body>

    <h1>My first web page</h1>

    <h2>What this is</h2>
    <p>A simple page put together using HTML</p>

    <h2>Why this is</h2>
    <p>To learn HTML</p>

    <h2>ESU's Homepage</h2>
    <p><a href="http://www.esu.edu">ESU</a></p>

</body>

</html>

The destination of the link is defined in the href attribute of the tag. The link can be absolute, such as “https://www.ndangelo.com”, or it can be relative to the current page.

So if, for example, you had another file called “flyingmoss.html” in the same directory then the line of code would be <a href="flyingmoss.html">The miracle of moss in flight</a> or something like this.

A link does not have to link to another HTML file, it can link to any file anywhere on the web.

Images

The web is not just about text, it is a multi-media extravaganza and the most common form of sparkle is the image.

The img tag is used to put an image in an HTML document and it looks like this:

<img src="test-image.gif" width="120" height="90" alt="Test">

The src attribute tells the browser where to find the image. Like the a tag, this can be absolute, as the above example demonstrates, but is usually relative. For example, if you create your own image and save it as “alien.jpg” in a directory called “images” then the code would be <img src="images/alien.jpg"...

The width and height attributes are necessary because if they are excluded, the browser will tend to calculate the size as the image loads, instead of when the page loads, which means that the layout of the document may jump around while the page is loading.

The alt attribute is the alternative description. This is an accessibility consideration, providing meaningful information for users who cannot see the image (if they are visually impaired).

Putting It All Together

The following code incorporates all of the methods that have been explained in the previous pages:

<!DOCTYPE html>

<html>

<head>

    <title>My first web page</title>

    <!-- This is a comment, by the way -->

</head>

<body>

<h1>My first web page</h1>

<h2>What this is</h2>
<p>A simple page put together using HTML. <em>I said a simple page put together using HTML.</em> A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML.</p>

<h2>Why this is</h2>
<ul>
    <li>To learn HTML</li>
    <li>
        To illustrate
        <ol>
            <li>To my boss</li>
            <li>To my friends</li>
            <li>To my cat</li>
            <li>I'm not sure what</li>
        </ol>
    </li>
    <li>Some interesting content</li>
</ul>

<h2>Where to find the tutorial</h2>
<p><a href="http://www.esu.edu"><img src="test-image.gif" width="120" height="90" alt="ESU"></a></p>


<h3>Some random form</h3>
<p><strong>Note:</strong> It looks the part, but won't function.</p>


</body>

</html>

Span and Div

HTML is all about applying meaning to content. Whereas most HTML tags apply meaning (p makes a paragraph, h1 makes a heading etc.), the span and div tags apply no meaning at all. They are used extensively in conjunction with CSS.

They are used to group together a chunk of HTML and hook some information onto that chunk, most commonly with the attributes class and id to associate the element with a class or id CSS selector.

The difference between span and div is that a span element is in-line and usually used for small snippets of HTML inside a line (such as inside a paragraph), whereas a div (division) element is block-line (which is equivalent to having a line-break before and after it) and used to group larger snippets of code.


<div id="scissors">
    <p>This is <span class="paper">crazy</span></p>
</div>

div, and especially span, shouldn’t be used that often. Whenever there is a sensible alternative that should be used instead. For example, if you want to emphasize the word “crazy” and the class “paper” is adding italics for visual emphasis, then, for richer, more meaningful content, the code might look like this:


<div id="scissors">
    <p>This is <em class="paper">crazy</em></p>
</div>

While they are not replacements for the div tag, HTML 5 introduces several tags used for grouping blocks of code together and adding meaning at the same time. Such as article, header, footer.

CSS Cheat Sheet

CSS Cheat Sheet

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Index Page</title>

<style type="text/css">

	@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;1,400&display=swap');
	
	.wrapper {
		font-family: 'Montserrat', sans-serif;
		width: 400px;
		height: 800px;
		border: solid 2px red;
		margin: auto;
		text-align: center;
	}

	ul, li {

	text-align: center;
	list-style-type: none;
	padding-right: 20px;

	}



</style>

</head>
<body>

	<div class="wrapper">
		
<h1>Intro to Web Assignments</h1>

<br><br><br><br>

<ul>

<li><a href="content.html" target="_blank">Content</a></li>
<li><a href="start.html" target="_blank">start</a></li>


</ul>

<img src="images/nd_logo_blog-2.png">
	</div>

</body>
</html>

See the Pen Layouts and the Box Model by Christina Truong (@christinatruong) on CodePen.

The following is some code I created on codepen.io. It includes div nesting, which we covered in class. The “pen” also has advanced CSS to make each div stand out.

From: https://www.htmldog.com/

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18