Thursday, July 9 Instructor: Craig Duckett [email protected] Crash Course in HTML

BIT116: ScriptingLecture 02 Part 1

Thursday, July 9

Instructor: Craig Duckett

[email protected]

Crash Course in HTML

2

First Things First: Opening & Working on Files (HTML, CS, JS)

HTML files are associated with the default browser, so if you want to open them in the Komodo Edit text editor (or some other text editor like Notepad++), then you have to manually point to your text editor when opening the HTML file (or you can simply drag-and-drop the HTML file into the open text editor). In Windows, Komodo Edit is located under Start > All Programs > ActiveState Komodo Edit 8

To Open a File in Komodo Edit

1. Right-click on the file to bring up the Context Window2. Select Open With3. Select Komodo Edit

If Komodo Edit does not appear in ‘Open With’ then you need to add it one time:4. Right-click on the file to bring up the Context Window5. Select Open With6. Select Choose default program…7. Uncheck (deselect) Always use the selected program to open this kind of file8. Browse to the Komodo Edit location and select the executable file (komodo.exe)

C:\Program Files (x86)\ActiveState Komodo Edit 8\komodo.exe

http://www.wikihow.com/Right-Click-on-a-Mac



3

The Versions of HTML

4

HTML1 (1993)

<A> <ADDRESS> <B> <BASE> <BLOCKQUOTE> <BODY> <CITE> <CODE> <DD> <DFN> <DIR> <DL> <DT> <EM> <H1> <H2> <H3> <H4> <H5> <H6> <HEAD> <HTML> <I> <IMG> <ISINDEX> <KBD> <KEY> <LI> <LINK> <LISTING> <MENU> <NEXTID> <OL> <P> <PLAINTEXT> <PRE> <SAMP> <STRONG> <TITLE> <TT> <U> <UL> <VAR> <XMP>

5

HTML2 (1995)

<A> <ADDRESS> <B> <BASE> <BLOCKQUOTE> <BODY> <BR> <CITE> <CODE> <DD> <DFN> <DIR> <DL> <DT> <EM> <FORM> <H1> <H2> <H3> <H4> <H5> <H6> <HEAD> <HR> <HTML> <I> <IMG> <INPUT> <ISINDEX> <KBD> <KEY> <LI> <LINK> <LISTING> <MENU> <META> <NEXTID> <OL> <OPTION> <P> <PLAINTEXT> <PRE> <SAMP> <SELECT> <STRONG> <TEXTAREA> <TITLE> <TT> <U> <UL> <VAR> <XMP>

RED = New TagsGRAY = Deprectated Tags

6

HTML3.2 (1997)

<A> <ADDRESS> <APPLET> <AREA> <B> <BASE> <BASEFONT> <BIG> <BLOCKQUOTE> <BODY> <BR> <CAPTION> <CENTER> <CITE> <CODE> <DD> <DFN> <DIR> <DIV> <DL> <DT> <EM> <FONT> <FORM> <H1> <H2> <H3> <H4> <H5> <H6> <HEAD> <HR> <HTML> <I> <IMG> <INPUT> <ISINDEX> <KBD> <LI> <LINK> <LISTING> <MAP> <MENU> <META> <NEXTID> <OL> <OPTION> <P> <PARAM> <PLAINTEXT> <PRE> <SAMP> <SCRIPT> <SELECT> <SMALL> <STRIKE> <STRONG> <STYLE> <SUB> <SUP> <TABLE> <TD> <TEXTAREA> <TH> <TITLE> <TR> <TT> <U> <UL> <VAR> <XMP>


7

HTML4 (1998)

<A> <ABBR> <ACRONYM> <ADDRESS> <AREA> <B> <BASE> <BDO> <BIG> <BLOCKQUOTE> <BODY> <BR> <BUTTON> <CAPTION> <CITE> <CODE> <COL> <COLGROUP> <DD> <DEL> <DFN> <DIV> <DL> <DT> <EM> <FIELDSET> <FONT> <FORM> <H1> <H2> <H3> <H4> <H5> <H6> <HEAD> <HR> <HTML> <I> <IMG> <INPUT> <INS> <KBD> <LABEL> <LEGEND> <LI> <LINK> <LISTING> <MAP> <MENU> <META> <NEXTID> <NOSCRIPT> <OBJECT> <OL> <OPTGROUP> <OPTION> <P> <PARAM> <PRE> <Q> <SAMP> <SCRIPT> <SELECT> <SMALL> <SPAN> <STRONG> <STYLE> <SUB> <SUP> <TABLE> <TBODY> <TD> <TEXTAREA> <TFOOT> <TH> <THEAD> <TITLE> <TR> <TT> <UL> <VAR> <XMP>


8

XHTML1 (2000) eXtensibleHTML<A> <ABBR> <ACRONYM> <ADDRESS> <AREA> <B> <BASE> <BDO> <BIG> <BLOCKQUOTE> <BODY> <BR> <BUTTON> <CAPTION> <CITE> <CODE> <COL> <COLGROUP> <DD> <DEL> <DFN> <DIV> <DL> <DT> <EM> <FIELDSET> <FORM> <H1> <H2> <H3> <H4> <H5> <H6> <HEAD> <HR> <HTML> <I> <IMG> <INPUT> <INS> <KBD> <LABEL> <LEGEND> <LI> <LINK> <MAP> <META> <NOSCRIPT> <OBJECT> <OL> <OPTGROUP> <OPTION> <P> <PARAM> <PRE> <Q> <SAMP> <SCRIPT> <SELECT> <SMALL> <SPAN> <STRONG> <STYLE> <SUB> <SUP> <TABLE> <TBODY> <TD> <TEXTAREA> <TFOOT> <TH> <THEAD> <TITLE> <TR> <TT> <UL> <VAR>

The main difference between XHTML1 and HTML4 is that all tags, once opened, must be closed. There are also some restrictions about what tags can be nested inside each other.

9

XHTML1.1 (2001)

<A> <ABBR> <ACRONYM> <ADDRESS> <AREA> <B> <BASE> <BDO> <BIG> <BLOCKQUOTE> <BODY> <BR> <BUTTON> <CAPTION> <CITE> <CODE> <COL> <COLGROUP> <DD> <DEL> <DFN> <DIV> <DL> <DT> <EM> <FIELDSET> <FORM> <H1> <H2> <H3> <H4> <H5> <H6> <HEAD> <HR> <HTML> <I> <IMG> <INPUT> <INS> <KBD> <LABEL> <LEGEND> <LI> <LINK> <MAP> <META> <NOSCRIPT> <OBJECT> <OL> <OPTGROUP> <OPTION> <P> <PARAM> <PRE> <Q> <RB> <RBC> <RP> <RT> <RTC> <RUBY> <SAMP> <SCRIPT> <SELECT> <SMALL> <SPAN> <STRONG> <STYLE> <SUB> <SUP> <TABLE> <TBODY> <TD> <TEXTAREA> <TFOOT> <TH> <THEAD> <TITLE> <TR> <TT> <UL> <VAR>

RED = New Tags

10

HTML5 (2008 Working Draft; 2012 - ?)

<A> <ABBR> <ACRONYM> <ADDRESS> <AREA> <ARTICLE> <ASIDE> <AUDIO> <B> <BASE> <BDI> <BDO> <BLOCKQUOTE> <BODY> <BR> <BUTTON> <CANVAS> <CAPTION> <CITE> <CODE> <COL> <COLGROUP> <COMMAND> <DATA> <DATAGRID> <DATALIST> <DD> <DEL> <DETAILS> <DFN> <DIV> <DL> <DT> <EM> <EMBED> <EVENTSOURCE> <FIELDSET> <FIGCAPTION> <FIGURE> <FOOTER> <FORM> <H1> <H2> <H3> <H4> <H5> <H6> <HEAD> <HEADER> <HGROUP> <HR> <HTML> <I> <IFRAME> <IMG> <INPUT> <INS> <KBD> <KEYGEN> <LABEL> <LEGEND> <LI> <LINK> <MARK> <MAP> <MENU> <META> <METER> <NAV> <NOSCRIPT> <OBJECT> <OL> <OPTGROUP> <OPTION> <OUTPUT> <P> <PARAM> <PRE> <PROGRESS> <Q> <RUBY> <RP> <RT> <S> <SAMP> <SCRIPT> <SECTION> <SELECT> <SMALL> <SOURCE> <SPAN> <STRONG> <STYLE> <SUB> <SUMMARY> <SUP> <TABLE> <TBODY> <TD> <TEXTAREA> <TFOOT> <TH> <THEAD> <TIME> <TITLE> <TR> <TRACK> <U> <UL> <VAR> <VIDEO> <WBR>

http://www.w3schools.com/tags/default.asp




11

The DOCTYPE

1. A statement or declaration which tells the browser what version of HTML our file is using and therefore how the code should be rendered by the browser at view time.

2. The DOCTYPE has to appear at the very top of the file, even before the opening HTML tag

HTML3.2 DOCTYPE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

HTML4 DOCTYPE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML1 DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5 DOCTYPE <!DOCTYPE HTML> THIS WILL BE THE DOCTYPE USED IN THIS CLASS

12

The HTML 5 DOCTYPE<!DOCTYPE HTML> <!–- case SENSITIVE, and OPTIONAL, but its use is highly recommended -->

<html lang ="en"> <!–- Tells browser the language being used; “en” is English-->

<head>

<meta charset="utf-8">

<title>A Groovy Page</title>

</head>

<body>

.

.

.

</body>

</html>

The default character encoding in HTML-5 is UTF-8

Universal Character Set Transitional Format 8-Bit

http://en.wikipedia.org/wiki/UTF-8

Meta Tags

http://www.w3schools.com/tags/tag_meta.asp






13

The Basic HTML Page<html><head><title>Simplest HTML page</title></head>

<body>Hello Everybody. What's happening?

</body></html>

The browser uses this information"behind the scenes"

The browser uses this informationTo display page content

Demo

14

The Template HTML Page

<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="author" content="Rex Winkus"> <title>HTML Template</title></head>

<body>

<h1>Page Heading</h1> 

<p>Page Content</p> 

</body></html>

The browser uses this head information"behind the scenes“

Meta tags for “charset” and “author”

The browser uses this body informationto display page content

<h1> element displays a header of a larger font size based on the default styles of the browser

template.html

15

The Absolute & Relative Linking

Absolute Linking

A link that includes the entire http path

Example http://programajama.com/foundations/rexwinkus/index.html

Relative Linking

A link that only includes the file path in relation to the files and folders in your remote directory

Example moon.html

http://programajama.com/foundations/rexwinkus/index.html



16

Common Tags

Tags Description Example

<p></p> paragraph Creates a paragraph between the opening/closing tags followed by a line of white space

<p>This is the first paragraph line.</p><p>This is the second paragraph line.</p><p>This is the third paragraph line.</p><p>This is the fourth paragraph line.</p>

This is the first paragraph line.

This is the second paragraph line.

This is the third paragraph line.

This is the fourth paragraph line.

W3Schools: <p> tag

http://www.w3schools.com/tags/tag_p.asp

17


<br> or <br />

line break The <br> tag inserts a single line break. The <br> tag is an empty tag which means that it has no end tag.

This is the first line.<br>This is the second line.<br>This is the third line.<br>This is the fourth line.

This is the first line.This is the second line.This is the third line.This is the fourth line.

W3Schools: <br> tag

http://www.w3schools.com/tags/tag_br.asp



18


<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>

heading tags Creates bold content of varying sizes, with the <h1> being the largest, and <h6> being the smallest, followed by a line of white space

<h1>This is the first heading line.</h1><h2>This is the second heading line.</h2><h3>This is the third heading line.</h3><h4>This is the fourth heading line.</h4><h5>This is the fifth heading line.</h5><h6>This is the sixth heading line.</h6>

This is the first heading line.

This is the second heading line.

This is the third heading line.

This is the fourth heading line.

This is the fifth heading line.

This is the sixth heading line.

W3Schools: <h1> to <h6> tags

http://www.w3schools.com/tags/tag_hn.asp

19


<ol></ol><li></li>

ordered listlist item

Creates a numbered list, followed by a line of white space. You can also declare its start, order, and the type of list using 1 (default), A, a, I (upper case Roman numeral), I (lower case roman numeral)

<ol> <li>Apple</li> <li>Banana</li> <li>Cantaloupe</li></ol><ol reverse> <li>Apple</li> <li>Banana</li> <li>Cantaloupe</li></ol><ol start="10" type="I"> <li>Apple</li> <li>Banana</li> <li>Cantaloupe</li></ol>

1. Apple2. Banana3. Cantaloupe

3. Apple2. Banana1. Cantaloupe

X. AppleXI. BananaXII. Cantaloupe

W3Schools: <ol> tag

http://www.w3schools.com/tags/tag_ol.asp



20


<ul></ul><li></li>

unordered listlist item

Creates a bulleted list, followed by a line of white space. You can also declare its type using CSS and the list-style-type property

<ul> <li>Apple</li> <li>Banana</li> <li>Cantaloupe</li></ul>

<ul> <li>Apple</li> <ul> <li> Red Delicious</li> <li> Granny Smith</li> </ul> <li>Banana</li> <li>Cantaloupe</li></ul>

• Apple• Banana• Cantaloupe

• Appleo Red Deliciouso Granny Smith

• Banana• Cantaloupe

W3Schools: <ul> tag

http://www.w3schools.com/cssref/pr_list-style-type.asp

http://www.w3schools.com/tags/tag_ul.asp



21

Back before HTML5, if you wanted to design a page into sections you had to use the <div> or "division" tag and creating a separate "id" or "class" for each section you wanted (we'll talk about divs, ids, and classes a bit later)

22

With HTML5, there are several new tags with this section functionality built in by default. You still need to position and format these sections using CSS, but you don't have to create separate or unique "classes" or "ids" anymore to do it.

23


<header></header>

header section of a web page

The <header> tag specifies a header for a document or section. The <header> element should be used as a container for introductory content or set of navigational links. You can have several <header> elements in one document. A <header> tag cannot be placed within a <footer>, <address> or another <header> element.

<!DOCTYPE html><html><body> <header> <h1>Rex Winkus's Portfolio</h1> </header> <h2>Week 1</h2> <p>Isn't it groovy?</p></body></html>

Rex Winkus's Portfolio

Week 1

Isn't it groovy?

W3Schools: <header> tag

http://www.w3schools.com/tags/tag_header.asp

24


<nav></nav>

navigation section of a web page The <nav> tag defines a set of navigation links. Not all links of a document must be in a <nav> element. The <nav> element is intended only for major block of navigation links.

<!DOCTYPE html><html><body><nav><a href="http://www.microsoft.com">Microsoft</a> | <a href="http://www.google.com">Google</a> |<a href="http://www.yahoo.com">Yahoo</a> |</nav></body></html>

Microsoft | Google | Yahoo

W3Schools: <nav> tag

http://www.w3schools.com/tags/tag_nav.asp



25


<footer></footer>

footer section of a web page A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.

<html><head> <title>Using A Footer</title> </head> <body> <header><h1>My Page</h1></header> <section> <h2>My Article</h2> <p>Some Information</p></section> <footer><p>© Rex Winkus 2015 <a href="mailto:[email protected]">Email Me</a><p></footer> </body> </html>

My Page

My Article

Some Information

© Rex Winkus 2015 Email Me

W3Schools <footer> tag

http://www.w3schools.com/tags/tag_footer.asp

26


<article></article>

article section of a web page The <article> tag specifies independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

<html><head> <title>Using Article</title> </head> <body> <header><h1>My Page</h1></header> <section> <article><h2>My First Article</h2> <p>Some Information</p> </article> <article><h2>My Second Article</h2> <p>Some Content</p> </article></section> </body> </html>

My Page

My First Article

Some Information

My Second Article

Some Content

W3Schools <article> tag

http://www.w3schools.com/tags/tag_article.asp

27


<section></section>

Defines a section of a web page The <section> tag defines sections in a document, such as chapters, headers, footers, or sections

<body> <header><h1>My Page</h1></header> <section> <article><h1>Articles</h1> <ul> <li>My First Article</li> <li>My Second Article</li> </ul> </article> <article><h2>My First Article</h2> <p>Some Information</p> </article> <article><h2>My Second Article</h2> <p>Some Content</p> </article></section> </body>

My Page

Articles• My First Article• My Second Article

My First Article

Some Information

My Second Article

Some Content

W3Schools <section> tag

http://www.w3schools.com/tags/tag_section.asp

28


<aside></aside>

Defines an aside section of a web page

The <aside> tag defines some content aside from the content it is placed in. The aside content should be related to the surrounding content.

<body> <header><h1>My Page</h1></header> <section> <article><h2>My First Article</h2> <p>Some Information</p> </article> <article><h2>My Second Article</h2> <p>Some Content</p> </article> <aside><h3>An Interesting Fact…</h3> <p>Some Interesting Information</p> </aside></section> </body>

My Page

My First Article

Some Information

My Second Article

Some Content

An Interesting Fact…

Some Interesting Information

W3Schools <aside> tag

http://www.w3schools.com/tags/tag_aside.asp

29


<div></div>

A division section of a web page The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group block-elements to format them with CSS.

<body> <header><h1>My Page</h1></header> <section><article><h2>My First Article</h2> <p>Some Information</p></article><article><<h2>My Second Article</h2> <p>Some Content</p></article><div style="color:red"><h3>An Interesting Fact…</h3> <p>Some Interesting Information</p></div></section> </body>

My Page

My First Article

Some Information

My Second Article

Some Content



W3Schools <div> tag

Also: <span> Next Slide

http://www.w3schools.com/tags/tag_div.asp

30


<span></span>

A division section of a web page A <A <span> element used to color a part of a text> element used to color a part of a text

<body> <header><h1>My Page</h1></header> <section><article><h2>My First Article</h2> <p>Some Information</p></article><article><h2>My Second Article</h2> <p>Some Content</p></article><h3>An <span style="color:red">Interesting</span> Fact…</h3> <p>Some <span style="color:red">Interesting Information</span></p></section> </body>

My Page

My First Article

Some Information

My Second Article

Some Content



W3Schools <span> tag

http://www.w3schools.com/tags/tag_span.asp

31

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>Putting It All Together</title></head><body>

<header><h1>My Page</h1></header><nav>

<a href="index.html">Home</a></nav><section>

<article><h2>My Article</h2><p>Some Content</p>

</article><aside>

<p>More information</p></aside>

</section> <footer><p>© Rex Winkus 2013 <a href="mailto:[email protected]">Email Me</a><p></footer></body></html>

Images (img Tag)

img src is required

The optional width, height may be in units of pixels or percentage of page or frame width="357" height="50%"

Images scale to fit the space allowed

alt tags (for "alternate") is text that gives a name for the image, and will appear in case the image is missing, as a mouseover popup, and in browser text readers for the visually impaired.

<img src="dude.jpg" alt="The Dude Abides">

32

Images

33

Align=position

Image/Text Placement

Left Image on left edge; text flows to right of image

Right Image on right edge; text flows to left

Top Image is left; words align with top of image

Bottom Image is left; words align with bottom of image

Middle Words align with middle of image

This is "old school" – Now images are aligned now using CSS

Images

34

<BODY> <img src=“dude.jpg" align="left" width="150" height="150" alt=“The Dude Abides!">

The Dude Abides.<br> </BODY></HTML>

This is "old school"Now images are aligned using CSS

http://faculty.cascadia.edu/cduckett/bit116/Lecture_02/html0i.html



35

I have not yet talked about color, tables, forms (including checkboxes, radio buttons, or select elements), or linking files in and out of sub-folders.

I will be bringing these up—as well as a few other HTML features—as the quarter progresses.

The use of color I will introduce with the next lecture when we move into CSS.

Note:

36

Please begin working on the LECTURE 2 Part 1 In-Class Exercises.

When you have completed your ICE, call the Instructor over to verify your work. If you have questions about your work, please call over the Instructor to clarify.

Once you have completed your ICEs, you are free to go for the day.

If you don't finish your ICEs by the end of class, you will still get full credit for actively doing the work, but it is greatly recommended you finish any outstanding ICEs outside of class.

ICE 2 Part 1

Documents

Thursday, July 9 Instructor: Craig Duckett [email protected] Crash Course in HTML