Notes 2
Lecture Topics:
- HTML - basic tags
- lists - ordered / unordered
- html files and the browser
- links - local / remote navigation
- images - local / remote sources
- development process
Basic HTML Tags
doctype
HTML 5
<!DOCTYPE html>
or for consistency
<!doctype html>
Definition and Usage
The doctype declaration should be the very first thing in an HTML document, before the <html> tag. The
doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of
the markup language the page is written in. The doctype declaration refers to a Document Type
Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers can render
the content correctly. (
w3schools.com)
html
<html> </html>
Definition and Usage
The <html> tag tells the browser that this is an HTML document. The html element is the outermost
element in HTML and XHTML documents. The html element is also known as the root element.
(
w3schools.com)
head
<head> </head>
Definition and Usage
The head element is a container for all the head elements. Elements inside <head> can include scripts,
instruct the browser where to find style sheets, provide meta information, and more. The following tags can
be added to the head section: <base>, <link>, <meta>, <script>, <style>, and
<title>. The <title> tag defines the title of the document, and is the only required element in
the head section! (
w3schools.com)
title
<title>page title</title>
Definition and Usage
The <title> tag defines the title of the document. The title element is required in all HTML/XHTML documents.
The title element: defines a title in the browser toolbar, provides a title for the page when it is added to
favorites, and displays a title for the page in search-engine results.
(w3schools.com)
body
<body> </body>
Definition and Usage
The body element defines the document's body. The body element contains all the contents of an HTML document,
such as text, hyperlinks, images, tables, lists, etc.
(w3schools.com)
h1, h2, h3, h4, h5, & h6
<h1>heading</h1>
<h2>heading</h2>
<h3>heading</h3>
<h4>heading</h4>
<h5>heading</h5>
<h6>heading</h6>
Definition and Usage
The <h1> to <h6> tags are used to define HTML headings. <h1> defines the largest heading and <h6>
defines the smallest heading.
(
w3schools.com)
p
<p>some text</p>
Definition and Usage
The <p> tag defines a paragraph. The p element automatically creates
some space before and after itself.
The space is automatically applied by the browser, or you can specify it
in a style sheet.
(
w3schools.com)
strong & em
<strong>bold</strong>
<em>italic</em>
Definition and Usage
The strong and em tags are both phrase tags. The strong tag renders text as bold, while the em tag renders
text as italic.
(
w3schools.com)
br
<br>
Definition and Usage
The <br> tag inserts a single line break. The <br> tag is an
empty tag which means that it has no end tag.
(
w3schools)
hr
<hr>
Definition and Usage
The <hr> tag creates a horizontal line in an HTML page.
(
w3schools)
ul, ol, & li
<ul>
<li>list item</li>
</ul>
<ol>
<li>list item</li>
</ol>
Definition and Usage
The <ul> tag defines an unordered list (a bulleted list).
(
w3schools.com)
The <ol> tag is used to create an ordered list.
(w3schools.com)
img
<img src='http://farm4.static.flickr.com/3150/2888070755_ccdc125bd3.jpg' alt='The Forbidden City'/>
<img src='bear.jpg' alt='a picture of a bear'/>
Definition and Usage
The <img> tag embeds an image in an HTML page. The <img> tag has
two required attributes: src and alt.
To reference a local image on your website, use the image
filename as the source. Since Unix is space sensitive, avoid
spaces and uppercase letters. If you use some uppercase letters in
the filename, you must use the same uppercase letters in the IMG tag.
(
w3schools.com)
a
<a href='http://www.csub.edu'>CSUB</a>
Definition and Usage
The <a> tag defines an anchor. An anchor can be used in two ways: to create a link to
another document, by using the href attribute, or to create a bookmark inside a document,
by using the name attribute. The a element is usually referred to as a link or a hyperlink.
The most important attribute of the a element is the href attribute, which indicates the
link destination. By default, links will appear as follows in all browsers: an unvisited
link is underlined and blue, a visited link is underlined and purple, and an active link
is underlined and red.
(
w3schools.com)
div
<div> </div>
Definition and Usage
The div tag is a block-level element that always starts on a new line and takes
up the full width available, like a h1 tag and p tag.
(
w3schools.com)
html 5 semantic elements
<header> </header>
<nav> </nav>
<section> </section>
<aside> </aside>
<article> </article>
<footer> </footer>
Definition and Usage
Semantics elements are like div elements, but offer a describable meaning
to both the browser and the developer. These are just a few common tags.
(
w3schools.com)
**we will discuss divs and semantics in more detail at a later date
Top