22-3375 Web Design I // Columbia College Chicago
HTML Foundations, pt 1
Directories
Room 902
<a href=” ”>
Room 902Room 901 Room 903
9th Floor
9th Floor/Room 902/
Room 902Room 901 Room 903
9th Floor
../Room 902/
Two dots in front of a forward slash means:
“step up one directory.” In t...
Room 902Room 901 Room 903
9th Floor8th Floor 10th Floor ++
Wabash
Campus
Mich Ave
Campus
Book & Paper
Center
++
Columbia
C...
/Columbia College/Wabash Campus/9th Floor/Room 902/
http://Columbia College/Wabash Campus/9th Floor/Room 902/
Relative lin...
The index file
When an absolute link is directed to a folder, the browser
needs to know which file to open. By default, it...
Tutorial: Relative Linking
Create a webpage with all three of these images placed:
FTP
File Transfer Protocol
Local
(your computer)
Host
(www)
FTP Software
All premium code editors have ftp built in, which allows you to
sync your project files to the server easily....
Wordpress
CMS
A Content Management System (CMS)
is a computer program that allows publishing, editing and
modifying content on a web...
index.php database
Dynamic CMS
WALKTHROUGH: Set up a theme in Wordpress
WALKTHROUGH: Create a post in Wordpress
HTML
Hyper Text
+
Markup Language
Hyper Text
Markup Language
A markup language is a
set of markup tags.
The purpose of the tags
are to describe page content.
Markup Language
Without any markup to give your content structure, the
browser renders unformatted and unstyled text, also...
Markup Language
HTML tags give structure and meaning to your content.
“Semantic markup” refers to the use of meaningful ta...
Markup Language
Once your content is marked up, the browser applies built-in
default styles to the tags. While you can ove...
Rich Text to Plain Text
Just as with InDesign, when you receive text from
someone that has already been formatted (e.g. fr...
Rich Text to Plain Text
In TextEdit, go to ‘Format’ to ‘Make Plain Text.’
Rich Text to Plain Text
Copy and paste the plain text into your HTML and start
typing in tags to recreate the document str...
HTML Elements
Anatomy of an Element
An HTML element includes both
the HTML tag and everything between
the tag (the content).
<tag>Conten...
Anatomy of an Element
The element tag gives the
content structure and meaning.
<tag>Content</tag>
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...
Anatomy of an Element
HTML has a defined set of tag
names (also called keywords) that
the browser understands.
<h1>Main He...
Anatomy of an Element
Most elements can have attributes,
which provides additional informatin
about the element.
<html lan...
Anatomy of an Element
Attributes always follow the same
format: name=”value”. You can use
either single or double quotes.
...
Where did those text styles come from?
Where did those text styles come from?
All browsers have what is called a
“client stylesheet” that applies formatting
to y...
Tags: Basic Structure
doctype
html
head
body
<!DOCTYPE html>
EXCEPTION
The doctype is not actually a tag,
but a declaration, telling the browser
what kind of html you ...
<html></html>
The <html> element defines
the whole HTML document.
<html lang=”en”></html>
The <html> element should have a “lang”
attribute to tell the browser what language
your page is w...
<head></head>
The <head> contains special elements
that instruct the browser where to find
stylesheets & javascript files,...
<body></body>
The <body> element contains
the document content (what is shown
inside the browser window).
Tutorial: Set up a basic html template
Nesting
The use of our first three tags (html, head and body),
introduces and important concept: Nesting, which is when
ta...
Document Hierarchy: Parents, children and siblings
Just as in a genealogy tree, the family hierarchy is described in
terms...
Tags: Head Tags
title
base
meta
link
script
style
<title></title>
The title element:
• defines a title in the browser toolbar,
• provides a title for the page when it is
ad...
<title>My Portfolio</title>
EXAMPLE
<meta>
The <meta> tag provides metadata
about the HTML document. Metadata
will not be displayed on the page, but
will be m...
<meta charset="utf-8">
The <meta> is a single tag —
it does not require a closing tag.
EXAMPLE
Tags: Paragraphs
<p></p>
The <p> element is a block-level tag
that contains default space-before and
space-after properties (making indenti...
EXAMPLE
Tags: Headings
<h1></h1>
through
<h6></h6>
The header elements are block-level
tags that give you the ability to assign
semantic weight (...
EXAMPLE
Tags: Lists
<ul>
<ol>
<dl>
List tags are always used in nested pairs.
The wrapping tags define the list type,
and indicate where the list series begi...
<ul>
<li></li>
</ul>
The <ul> (unordered list) element is a
block-level tag that wraps a series of <li>
(list item) elemen...
EXAMPLE
<ol>
<li></li>
</ol>
The <ol> (ordered list) element is a
block-level tag that wraps a series of <li>
(list item) elements...
EXAMPLE
Tags: Formatting
(partial list)
big
q
blockquote
cite
i (or) em
small
b (or) strong
sub
sup
del
EXAMPLES
EXAMPLES
Tags: Special Elements
<br>
The <br> element is a single, inline
tag that works anywhere in the body
to create a single line break. In a <p>
elem...
EXAMPLE
A horizontal rule is created by
using the single tag <hr>. It is a block
level element (so it will clear the elements
abov...
Escape & Special Characters
In HTML, some characters are reserved for the code, like brackets
(< >), ampersands (&), and q...
Tags: Images
<img>
The <img> element is a single, inline
tag that works anywhere in the body
to insert a jpg, png, svg or gif file.
The <img> tag is empty;
it requires a src (source) attribute to
“pull in” the image into the page. It does
not require an ...
<img src="images/logo.gif" alt=”Acme Corp”>
All <img> tags should also contain an
alt attribute. This is “alternate” text
...
Tags: Anchors (linking)
<a></a>
The <a> element is an inline
tag that works anywhere in the
body to create a hyperlink.
EXAMPLE
<a href="aboutme.html">About Me</a>
<a> tags are always used in pairs,
wrapping the content you want to activate
a...
Relative vs Absolute links
Whenever you link to a file with an ‘href‘ (hypertext reference )
or ‘src’ (source) attribute, ...
Relative vs Absolute links
A relative link is relative to the resource’s location in its
directory. It is like saying “the...
Relative vs Absolute links
An absolute link is the full address to the resource’s location
in the entire web. It is like s...
HTML Foundations, part 1
HTML Foundations, part 1
HTML Foundations, part 1
HTML Foundations, part 1
HTML Foundations, part 1
Upcoming SlideShare
Loading in …5
×

HTML Foundations, part 1

4,080 views

Published on

http://shawncalvert.com/webdesign-1
Web Design 1
Columbia College Chicago

Published in: Education, Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,080
On SlideShare
0
From Embeds
0
Number of Embeds
1,112
Actions
Shares
0
Downloads
87
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

HTML Foundations, part 1

  1. 1. 22-3375 Web Design I // Columbia College Chicago HTML Foundations, pt 1
  2. 2. Directories
  3. 3. Room 902 <a href=” ”>
  4. 4. Room 902Room 901 Room 903 9th Floor 9th Floor/Room 902/
  5. 5. Room 902Room 901 Room 903 9th Floor ../Room 902/ Two dots in front of a forward slash means: “step up one directory.” In this example it says: “step out of room 903 and then back into room 902, talk to “
  6. 6. Room 902Room 901 Room 903 9th Floor8th Floor 10th Floor ++ Wabash Campus Mich Ave Campus Book & Paper Center ++ Columbia College University of IL SAAIC ++
  7. 7. /Columbia College/Wabash Campus/9th Floor/Room 902/ http://Columbia College/Wabash Campus/9th Floor/Room 902/ Relative link to root A relative link (does not start with “http://”) with a slash at the beginning forces the link to start at the root of the website. This will only work on the server, not when you are working locally. Absolute links Absolute links are typically used for linking to pages or files outside of your site’s directories.
  8. 8. The index file When an absolute link is directed to a folder, the browser needs to know which file to open. By default, it looks for a file named “index” (the extension is not important, usually is it index.html, or index.php). This is why the homepage is always named “index”. So, <a href=”http://www.mysite.com/”> and <a href=”http://www.mysite.com/index.html”> will open the same file. root directory (www.mysite.com) index.html images logo.png
  9. 9. Tutorial: Relative Linking Create a webpage with all three of these images placed:
  10. 10. FTP
  11. 11. File Transfer Protocol Local (your computer) Host (www)
  12. 12. 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.
  13. 13. Wordpress
  14. 14. CMS A Content Management System (CMS) is a computer program that allows publishing, editing and modifying content on a web site as well as maintenance from a central page.
  15. 15. index.php database Dynamic CMS
  16. 16. WALKTHROUGH: Set up a theme in Wordpress
  17. 17. WALKTHROUGH: Create a post in Wordpress
  18. 18. HTML
  19. 19. Hyper Text + Markup Language
  20. 20. Hyper Text
  21. 21. Markup Language A markup language is a set of markup tags. The purpose of the tags are to describe page content.
  22. 22. Markup Language Without any markup to give your content structure, the browser renders unformatted and unstyled text, also known as “plain text”.
  23. 23. Markup Language 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).
  24. 24. Markup Language Once your content is marked up, the browser applies built-in default styles to the tags. While you can override these styles with css, your marked up, non-css styled document should be readable and have a clear hierarchy.
  25. 25. 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.
  26. 26. Rich Text to Plain Text In TextEdit, go to ‘Format’ to ‘Make Plain Text.’
  27. 27. Rich Text to Plain Text Copy and paste the plain text into your HTML and start typing in tags to recreate the document structure.
  28. 28. HTML Elements
  29. 29. Anatomy of an Element An HTML element includes both the HTML tag and everything between the tag (the content). <tag>Content</tag>
  30. 30. Anatomy of an Element The element tag gives the content structure and meaning. <tag>Content</tag>
  31. 31. 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>
  32. 32. Anatomy of an Element HTML has a defined set of tag names (also called keywords) that the browser understands. <h1>Main Headline</h1>
  33. 33. Anatomy of an Element Most elements can have attributes, which provides additional informatin about the element. <html lang=”en”></html>
  34. 34. Anatomy of an Element Attributes always follow the same format: name=”value”. You can use either single or double quotes. <div class=”left-nav”></div>
  35. 35. Where did those text styles come from?
  36. 36. Where did those text styles come from? 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.
  37. 37. Tags: Basic Structure
  38. 38. doctype html head body
  39. 39. <!DOCTYPE html> EXCEPTION The doctype is not actually a tag, but a declaration, telling the browser what kind of html you are using. The doctype above declares HTML 5.
  40. 40. <html></html> The <html> element defines the whole HTML document.
  41. 41. <html lang=”en”></html> The <html> element should have a “lang” attribute to tell the browser what language your page is written in.
  42. 42. <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.
  43. 43. <body></body> The <body> element contains the document content (what is shown inside the browser window).
  44. 44. Tutorial: Set up a basic html template
  45. 45. 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.
  46. 46. 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>
  47. 47. Tags: Head Tags
  48. 48. title base meta link script style
  49. 49. <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.
  50. 50. <title>My Portfolio</title> EXAMPLE
  51. 51. <meta> The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine readable.
  52. 52. <meta charset="utf-8"> The <meta> is a single tag — it does not require a closing tag. EXAMPLE
  53. 53. Tags: Paragraphs
  54. 54. <p></p> The <p> element is a block-level tag that contains default space-before and space-after properties (making indention unnecessary.)
  55. 55. EXAMPLE
  56. 56. Tags: Headings
  57. 57. <h1></h1> through <h6></h6> The header elements are block-level tags that give you the ability to assign semantic weight (importance) to your headlines.
  58. 58. EXAMPLE
  59. 59. Tags: Lists
  60. 60. <ul> <ol> <dl>
  61. 61. 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
  62. 62. <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.
  63. 63. EXAMPLE
  64. 64. <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).
  65. 65. EXAMPLE
  66. 66. Tags: Formatting
  67. 67. (partial list) big q blockquote cite i (or) em small b (or) strong sub sup del
  68. 68. EXAMPLES
  69. 69. EXAMPLES
  70. 70. Tags: Special Elements
  71. 71. <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.
  72. 72. EXAMPLE
  73. 73. 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>
  74. 74. 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: & &amp; “ &ldquo; ” &ldquo; ‘ &amp; ’ &amp; – &ndash; — &mdash; © &copy; ← &larr; → &rarr;
  75. 75. Tags: Images
  76. 76. <img> The <img> element is a single, inline tag that works anywhere in the body to insert a jpg, png, svg or gif file.
  77. 77. 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
  78. 78. <img src="images/logo.gif" alt=”Acme Corp”> All <img> tags should also contain an alt attribute. This is “alternate” text that will appear if for some reason the image link is broken or the file is unavailable. EXAMPLE
  79. 79. Tags: Anchors (linking)
  80. 80. <a></a> The <a> element is an inline tag that works anywhere in the body to create a hyperlink.
  81. 81. EXAMPLE <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>
  82. 82. 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
  83. 83. 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
  84. 84. 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

×