Web2 html
-
Upload
shawn-calvert -
Category
Documents
-
view
1.259 -
download
0
Transcript of Web2 html
![Page 1: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/1.jpg)
22-3376 Web Design 2 // Columbia College Chicago
INTRO/HTML
![Page 2: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/2.jpg)
shawncalvert.com/webdesign-2 !
!
TO DO
Review syllabus and resources page Download web2-questions.txt, then type out answers
![Page 3: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/3.jpg)
Q.
Name Major HTML/CSS experience (beyond web1 1) What is your favorite design project ever?
![Page 4: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/4.jpg)
Q.
Name Major HTML/CSS experience (beyond web1 1) What is your favorite design project ever?
Q.
What make a good site? (3 qualities) What is outdated in web design? (3) List 3 site you visit most
![Page 5: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/5.jpg)
HTML
![Page 6: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/6.jpg)
Hyper Text+
Markup Language
![Page 7: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/7.jpg)
Hyper Text
![Page 8: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/8.jpg)
Markup Language
A markup language is a set of markup tags.
The purpose of the tags are to describe page content.
![Page 9: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/9.jpg)
Markup Language
Without any markup to give your content structure, the browser renders unformatted as unstyled text, also known as “plain text”.
![Page 10: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/10.jpg)
Semantic Markup
HTML tags give structure and meaning to your content. “Semantic markup” refers to the use of meaningful tags to describe content (e.g. using header tags for header content).
![Page 11: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/11.jpg)
Rich Text to Plain Text
Just as with InDesign, when you receive text from someone that has already been formatted (e.g. from Word), you should always paste that text into TextEdit, and convert to plain text.
![Page 12: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/12.jpg)
Rich Text to Plain Text
In TextEdit, go to ‘Format’ to ‘Make Plain Text.’
![Page 13: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/13.jpg)
Rich Text to Plain Text
Copy and paste the plain text into your HTML and start typing in tags to recreate the document structure.
![Page 14: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/14.jpg)
HTML Elements
![Page 15: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/15.jpg)
Anatomy of an Element
An HTML element includes both the HTML tag and everything between
the tag (the content).
<tag>Content</tag>
![Page 16: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/16.jpg)
Anatomy of an Element
The element tag gives the content structure and meaning.
<tag>Content</tag>
![Page 17: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/17.jpg)
Anatomy of an Element
Tags normally come in pairs. The first tag is the start tag, and the second
tag is the end tag.
<tag>Content</tag>
![Page 18: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/18.jpg)
Anatomy of an Element
HTML has a defined set of tag names (also called keywords) that
the browser understands.
<h1>Main Headline</h1>
![Page 19: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/19.jpg)
Anatomy of an Element
Most elements can have attributes,which provides additional informatin
about the element.
<html lang=”en”></html>
![Page 20: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/20.jpg)
Anatomy of an Element
Attributes always follow the sameformat: name=”value”. You can use
either single or double quotes.
<div class=”left-nav”></div>
![Page 21: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/21.jpg)
Anatomy of an Element
<el name=”value” name=”value”></el>
An element can have multiple attributes, separated by a letterspace.
![Page 22: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/22.jpg)
Tags: Basic Structure
![Page 23: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/23.jpg)
doctype html head body
![Page 24: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/24.jpg)
<!DOCTYPE html>
EXCEPTION
The doctype is not actually a tag, but a declaration, telling the browserwhat kind of html you are using. The
doctype above declares HTML 5.
![Page 25: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/25.jpg)
<html></html>
The <html> element defines the whole HTML document.
STRUCTURE
![Page 26: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/26.jpg)
<html lang=”en”></html>
The <html> element should have a “lang” attribute to tell the browser what language
your page is written in.
STRUCTURE
![Page 27: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/27.jpg)
<head></head>
The <head> contains special elements that instruct the browser where to find stylesheets & javascript files, as well as
provide meta data about your site.
STRUCTURE
![Page 28: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/28.jpg)
<body></body>
The <body> element contains the document content (what is shown
inside the browser window).
STRUCTURE
![Page 29: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/29.jpg)
Document Hierarchy: Parents, children and siblings
Just as in a genealogy tree, the family hierarchy is described in terms of relationships. All elements in the document have a parent (up to ‘document’, which is at the top), and may have children (nested inside) or siblings (placed alongside).
<parent x>
<child and sibling y> </child and sibling y>
<child and sibling z> </child and sibling z>
</parent x>
![Page 30: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/30.jpg)
Nesting
The use of our first three tags (html, head and body), introduces and important concept: Nesting, which is when tags “wrap” other tags. When you create markup, you should indicate nesting by indenting the nested tags with 2 spaces (preferred) or a tab.
<html> <head> </head> <body>
<h1><h1> <p></p>
</body> </html>
![Page 31: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/31.jpg)
![Page 32: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/32.jpg)
Tags: Head Tags
![Page 33: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/33.jpg)
title base meta link
script style
![Page 34: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/34.jpg)
<title></title>
The title element:• defines a title in the browser toolbar, • provides a title for the page when it is added to favorites • displays a title for the page in search engine results.
HEAD TAG
![Page 35: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/35.jpg)
<title>My Portfolio</title>
HEAD TAG
![Page 36: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/36.jpg)
<meta>
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be
machine readable.
HEAD TAG
![Page 37: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/37.jpg)
<meta charset="utf-8">
The <meta> is a single tag —it does not require a closing tag.
HEAD TAG
![Page 38: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/38.jpg)
<link>
The <link> tag defines the relationship between a document
and an external resource. It is a single tag.
HEAD TAG
![Page 39: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/39.jpg)
<link rel="stylesheet" type="text/css" href="stylesheet.css">
In the example above, the <link> taghas three attributes: rel (relationship), type, and href (hypertext reference).
HEAD TAG
![Page 40: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/40.jpg)
Tags: Body Tags
![Page 41: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/41.jpg)
<p></p>
The <p> element is a block-level tag that contains default space-before and
space-after properties (making indentionunnecessary.)
![Page 42: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/42.jpg)
![Page 43: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/43.jpg)
<h1></h1> through
<h6></h6>
The header elements are block-leveltags that give you the ability to assign semantic weight (importance) to your
headlines.
![Page 44: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/44.jpg)
![Page 45: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/45.jpg)
Tags: Body Tags: Lists
![Page 46: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/46.jpg)
<ul> <ol> <dl>
![Page 47: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/47.jpg)
List tags are always used in nested pairs. !
The wrapping tags define the list type, and indicate where the list series begins
and ends.
NOTE
![Page 48: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/48.jpg)
<ul> <li></li>
</ul>
The <ul> (unordered list) element is a block-level tag that wraps a series of <li> (list item) elements. The default property
for the list items is a bullet.
![Page 49: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/49.jpg)
![Page 50: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/50.jpg)
<ol> <li></li>
</ol>
The <ol> (ordered list) element is a block-level tag that wraps a series of <li> (list item) elements. The default property
for the list items is decimal (1, 2, 3).
![Page 51: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/51.jpg)
![Page 52: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/52.jpg)
Where did those text styles come from?
![Page 53: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/53.jpg)
All browsers have what is called a“client stylesheet” that applies formatting
to your html elements, such as text size, font,color, margins, line-height, and much more.
Your custom css overrides some of these default styles.
Where did those text styles come from?
![Page 54: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/54.jpg)
Block and Inline elements
One important default style applied to elements is whether they are block or inline. This is called their display property (we will talk about properties when we get to CSS).
A block element takes up the full width available to the element, and forces a line above and below. Examples include <p>, <div>, <ul>, <blockquote> and all headers.
block element
another element
another element
another element
![Page 55: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/55.jpg)
Block and Inline elements
A inline element can be inserted within block elements or other inline elements and do no create additional space or line breaks. Examples include <img>, <em>, <strong>, <a>, and <span>.
<p></p>
<p>
<p></p>
<a></a> </p>
![Page 56: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/56.jpg)
Tags: Formatting
![Page 57: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/57.jpg)
(partial list)
big q
blockquote cite
i (or) em !
small b (or) strong
sub sup del
!
![Page 58: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/58.jpg)
![Page 59: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/59.jpg)
![Page 60: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/60.jpg)
Tags: Special Elements
![Page 61: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/61.jpg)
<br>
The <br> element is a single, inline tag that works anywhere in the body to create a single line break. In a <p>
element, it is the equivalent of a soft return.
![Page 62: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/62.jpg)
![Page 63: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/63.jpg)
A horizontal rule is created by using the single tag <hr>. It is a block
level element (so it will clear the elements above and below.
<hr>
![Page 64: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/64.jpg)
Escape & Special Characters
In HTML, some characters are reserved for the code, like brackets (< >), ampersands (&), and quotes (“ and ‘). Other characters, like em & en dashes, em spaces, curly quotes, copyright symbols, fractions, etc, are not included in the “standard” character sets. In both cases, you work around this by using special codes that will translate into those characters in the browser. Below are the ones you will probably use the most:
& &
“ “
” “
‘ &
’ &
– –
— —
© ©
← ←
→ →
![Page 65: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/65.jpg)
Tags: Images
![Page 66: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/66.jpg)
<img>
The <img> element is a single, inline tag that works anywhere in the body
to insert a jpg, png, svg or gif file.
![Page 67: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/67.jpg)
The <img> tag is empty;it requires a src (source) attribute to
“pull in” the image into the page. It does not require an “alt” tag, but if the image
is essential to the content (e.g. not a background or decorative element), it
should have one.
NOTE
![Page 68: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/68.jpg)
<img src="images/logo.gif" alt=”Acme Corp”>
All <img> tags should also contain analt attribute. This is “alternate” text
that will appear if for some reason the image link is broken or the file is unavailable.
![Page 69: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/69.jpg)
Tags: Anchors (linking)
![Page 70: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/70.jpg)
<a></a>
The <a> element is an inline tag that works anywhere in the
body to create a hyperlink.
![Page 71: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/71.jpg)
<a href="aboutme.html">About Me</a>
<a> tags are always used in pairs, wrapping the content you want to activate as a link. If you use an absolute URL, it must start with
“http://”.
<a href="http://www.colum.edu">My school</a>
![Page 72: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/72.jpg)
Relative vs Absolute links
Whenever you link to a file with an ‘href‘ (hypertext reference ) or ‘src’ (source) attribute, you are providing the browser and address to the resource. That address can be relative or absolute.
root directory (www.mysite.com)
index.html
images
logo.png
report.pdf
stylesheet.css
!
![Page 73: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/73.jpg)
Relative vs Absolute links
A relative link is relative to the resource’s location in its directory. It is like saying “the restaurant is 2 blocks away.”In the example below, if ‘logo.png‘ were linked from the homepage (index.html), the tag would be:
<img src=”images/logo.png”>
root directory (www.mysite.com)
index.html
images
logo.png
report.pdf
stylesheet.css
!
![Page 74: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/74.jpg)
Relative vs Absolute links
An absolute link is the full address to the resource’s location in the entire web. It is like saying “the restaurant is at 222 West Grand, Chicago IL 60625.”
<img src=”http://www.mysite.com/images/logo.png”>
root directory (www.mysite.com)
index.html
images
logo.png
report.pdf
stylesheet.css
!
![Page 75: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/75.jpg)
QUIZ
PrimaryStructure html head body
Head Elements title meta link
BodyElements p br h1 – h6 ul ol a img div
FormattingElements em strong q blockquote
![Page 76: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/76.jpg)
FTP
![Page 77: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/77.jpg)
File Transfer Protocol
Local(your computer)
Host(www)
![Page 78: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/78.jpg)
FTP Software
All premium code editors have ftp built in, which allows you to sync your project files to the server easily.
You will often need to post or download files from the server manually. For this you can use dedicated ftp software:
Fetch, Transmit and FileZilla & Fireftp (both free) are all good choices for Mac.
![Page 79: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/79.jpg)
![Page 80: Web2 html](https://reader033.fdocuments.us/reader033/viewer/2022042816/5589b6bdd8b42a23058b4606/html5/thumbnails/80.jpg)