Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Class Intro / HTML Basics

•
•
Shawn Calvert
Shawn Calvert

This document provides an overview of HTML elements and tags. It discusses the basic HTML page structure including <html>, <head>, and <body> tags. It also covers common text formatting tags, links, images, lists, and more. The document emphasizes that HTML provides semantic structure and meaning to content through appropriate tag usage. It concludes with a brief discussion of relative vs. absolute links and FTP for transferring files to a server.

1 of 80
Download to read offline
INTRO/HTML 22-3376 Web Design 2 // Columbia College Chicago
shawncalvert.com/webdesign-2 ! ! TO DO Review syllabus and resources page Download web2-questions.txt, then type out answers
Q. Name Major HTML/CSS experience (beyond web1 1) What is your favorite design project ever?
Q. What Name make a good site? (3 qualities) Major What is outdated in web design? (3) List HTML/3 site CSS you experience visit most (beyond web1 1) What is your favorite design project ever?
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 as unstyled text, also known as “plain text”.
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).
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.
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 structure.
HTML Elements
Anatomy of an Element <tag>Content</tag> An HTML element includes both the HTML tag and everything between the tag (the content).
Anatomy of an Element <tag>Content</tag> The element tag gives the content structure and meaning.
Anatomy of an Element <tag>Content</tag> Tags normally come in pairs. The first tag is the start tag, and the second tag is the end tag.
Anatomy of an Element <h1>Main Headline</h1> HTML has a defined set of tag names (also called keywords) that the browser understands.
Anatomy of an Element <html lang=”en”></html> Most elements can have attributes, which provides additional informatin about the element.
Anatomy of an Element <div class=”left-nav”></div> Attributes always follow the same format: name=”value”. You can use either single or double quotes.
Anatomy of an Element <el name=”value” name=”value”></el> An element can have multiple attributes, separated by a letterspace.
Tags: Basic Structure
doctype html head body
EXCEPTION <!DOCTYPE html> 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.
STRUCTURE <html></html> The <html> element defines the whole HTML document.
STRUCTURE <html lang=”en”></html> The <html> element should have a “lang” attribute to tell the browser what language your page is written in.
STRUCTURE <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 <body></body> The <body> element contains the document content (what is shown inside the browser window).
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>
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> <body> <h1><<p></</body> </html>
Class Intro / HTML Basics
Tags: Head Tags
title base meta link script style
HEAD TAG <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 <title>My Portfolio</title>
HEAD TAG <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 <meta charset="utf-8"> The <meta> is a single tag — it does not require a closing tag.
HEAD TAG <link> The <link> tag defines the relationship between a document and an external resource. It is a single tag.
HEAD TAG <link rel="stylesheet" type="text/css" href="stylesheet.css"> In the example above, the <link> tag has three attributes: rel (relationship), type, and href (hypertext reference).
Tags: Body Tags
<p></p> The <p> element is a block-level tag that contains default space-before and space-after properties (making indention unnecessary.)
Class Intro / HTML Basics
<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.
Class Intro / HTML Basics
Tags: Body Tags: Lists
<ul> <ol> <dl>
NOTE List tags are always used in nested pairs. ! The wrapping tags define the list type, and indicate where the list series begins and ends.
<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.
Class Intro / HTML Basics
<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).
Class Intro / HTML Basics
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 your html elements, such as text size, font, color, margins, line-height, and much more. Your custom css overrides some of these default styles.
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. another element block element another element another element
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>
Tags: Formatting
(partial list) big q blockquote cite i (or) em ! small b (or) strong sub sup del !
Class Intro / HTML Basics
Class Intro / HTML Basics
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> element, it is the equivalent of a soft return.
Class Intro / HTML Basics
<hr> 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.
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;
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.
NOTE 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.
<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.
Tags: Anchors (linking)
<a></a> The <a> element is an inline tag that works anywhere in the body to create a hyperlink.
<a href="aboutme.html">About Me</a> <a href="http://www.colum.edu">My school</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://”.
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 !
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
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
QUIZ Primary Structure html head body Head Elements title meta link Body Elements p br h1 – h6 ul ol a img div Formatting Elements em strong q blockquote
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. 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.
Class Intro / HTML Basics
Class Intro / HTML Basics

More Related Content

Class Intro / HTML Basics

  • 1. INTRO/HTML 22-3376 Web Design 2 // Columbia College Chicago
  • 2. shawncalvert.com/webdesign-2 ! ! TO DO Review syllabus and resources page Download web2-questions.txt, then type out answers
  • 3. Q. Name Major HTML/CSS experience (beyond web1 1) What is your favorite design project ever?
  • 4. Q. What Name make a good site? (3 qualities) Major What is outdated in web design? (3) List HTML/3 site CSS you experience visit most (beyond web1 1) What is your favorite design project ever?
  • 6. Hyper Text + Markup Language
  • 8. Markup Language A markup language is a set of markup tags. The purpose of the tags are to describe page content.
  • 9. Markup Language Without any markup to give your content structure, the browser renders unformatted as unstyled text, also known as “plain text”.
  • 10. 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).
  • 11. 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.
  • 12. Rich Text to Plain Text In TextEdit, go to ‘Format’ to ‘Make Plain Text.’
  • 13. Rich Text to Plain Text Copy and paste the plain text into your HTML and start typing in tags to recreate the document structure.
  • 15. Anatomy of an Element <tag>Content</tag> An HTML element includes both the HTML tag and everything between the tag (the content).
  • 16. Anatomy of an Element <tag>Content</tag> The element tag gives the content structure and meaning.
  • 17. Anatomy of an Element <tag>Content</tag> Tags normally come in pairs. The first tag is the start tag, and the second tag is the end tag.
  • 18. Anatomy of an Element <h1>Main Headline</h1> HTML has a defined set of tag names (also called keywords) that the browser understands.
  • 19. Anatomy of an Element <html lang=”en”></html> Most elements can have attributes, which provides additional informatin about the element.
  • 20. Anatomy of an Element <div class=”left-nav”></div> Attributes always follow the same format: name=”value”. You can use either single or double quotes.
  • 21. Anatomy of an Element <el name=”value” name=”value”></el> An element can have multiple attributes, separated by a letterspace.
  • 24. EXCEPTION <!DOCTYPE html> 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.
  • 25. STRUCTURE <html></html> The <html> element defines the whole HTML document.
  • 26. STRUCTURE <html lang=”en”></html> The <html> element should have a “lang” attribute to tell the browser what language your page is written in.
  • 27. STRUCTURE <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.
  • 28. STRUCTURE <body></body> The <body> element contains the document content (what is shown inside the browser window).
  • 29. 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>
  • 30. 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> <body> <h1><<p></</body> </html>
  • 33. title base meta link script style
  • 34. HEAD TAG <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.
  • 35. HEAD TAG <title>My Portfolio</title>
  • 36. HEAD TAG <meta> The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine readable.
  • 37. HEAD TAG <meta charset="utf-8"> The <meta> is a single tag — it does not require a closing tag.
  • 38. HEAD TAG <link> The <link> tag defines the relationship between a document and an external resource. It is a single tag.
  • 39. HEAD TAG <link rel="stylesheet" type="text/css" href="stylesheet.css"> In the example above, the <link> tag has three attributes: rel (relationship), type, and href (hypertext reference).
  • 41. <p></p> The <p> element is a block-level tag that contains default space-before and space-after properties (making indention unnecessary.)
  • 43. <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.
  • 47. NOTE List tags are always used in nested pairs. ! The wrapping tags define the list type, and indicate where the list series begins and ends.
  • 48. <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.
  • 50. <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).
  • 52. Where did those text styles come from?
  • 53. 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.
  • 54. 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. another element block element another element another element
  • 55. 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>
  • 57. (partial list) big q blockquote cite i (or) em ! small b (or) strong sub sup del !
  • 61. <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.
  • 63. <hr> 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.
  • 64. 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;
  • 66. <img> The <img> element is a single, inline tag that works anywhere in the body to insert a jpg, png, svg or gif file.
  • 67. NOTE 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.
  • 68. <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.
  • 70. <a></a> The <a> element is an inline tag that works anywhere in the body to create a hyperlink.
  • 71. <a href="aboutme.html">About Me</a> <a href="http://www.colum.edu">My school</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://”.
  • 72. 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 !
  • 73. 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
  • 74. 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
  • 75. QUIZ Primary Structure html head body Head Elements title meta link Body Elements p br h1 – h6 ul ol a img div Formatting Elements em strong q blockquote
  • 76. FTP
  • 77. File Transfer Protocol Local (your computer) Host (www)
  • 78. 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.