thursday, july 9 instructor: craig duckett [email protected] crash course in html
TRANSCRIPT
BIT116: ScriptingLecture 02 Part 1
Thursday, July 9
Instructor: Craig Duckett
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
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>
RED = New TagsGRAY = Deprectated Tags
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>
RED = New TagsGRAY = Deprectated Tags
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
RED = New TagsGRAY = Deprectated Tags
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> <!-- heading -->
<p>Page Content</p> <!-- paragraph -->
</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
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
17
Tags Description Example
<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
18
Tags Description Example
<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
19
Tags Description Example
<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
20
Tags Description Example
<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
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
Tags Description Example
<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
24
Tags Description Example
<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
25
Tags Description Example
<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
26
Tags Description Example
<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
27
Tags Description Example
<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
28
Tags Description Example
<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
29
Tags Description Example
<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
An Interesting Fact…
Some Interesting Information
W3Schools <div> tag
Also: <span> Next Slide
30
Tags Description Example
<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
An Interesting Fact…
Some Interesting Information
W3Schools <span> tag
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