View
38
Download
3
Category
Preview:
DESCRIPTION
Instructional Technology & Design Office itd@support.lis.illinois.edu 217-244-4903 or 800-377-1892. Beginning Web Design. Presented by Laura Miller. Purpose + Learning objectives. Agenda: Introduction of HTML Basic code elements Current code/design standards Go over file template. - PowerPoint PPT Presentation
Citation preview
Instructional Technology & Design Office
itd@support.lis.illinois.edu
217-244-4903 or 800-377-1892
Beginning Web DesignPresented by Laura Miller
Purpose + Learning objectives
Agenda:- Introduction of HTML
- Basic code elements
- Current code/design standards
- Go over file template
Some Things you will need
1. A code editor- For Macintosh:
o Text Wrangler
- For Microsoft Windows:
o Notepad++
- Some simple-text editors will work (e.g., TextEdit)
2. A place to put your web page files on the Internet- I: Drive
- Google Sites, Wix, Weeble
- Web hosting service provider with domain name
You can also view HTML webpage files locally in your favorite web browser.
What is HTML?
HTML = HyperText Markup Language
Tim Berners-Lee created the first version in the late 1980s as a
way to share research. HTML became standardized in
November 1995 as HTML 2.0. The current standard is HTML5.
World Wide Web Consortium (W3C) is the international
standards organization for the World Wide Web. W3C
maintains the standards for HTML, CSS, XML, among many
other languages.
Syntax of HTML
Each element has three components:• Tags are enclosed in angle brackets – <start
tag> </ end tag>
• Attributes may be included in the start tag
• Content is always placed in between the two
tags
<tagname
attribute=“value”>content</tagname>
Basic construction of an html document
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<title>Hello HTML World</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
Common HTML ElementsText Structural
• <p></p>• <h1></h1> - <h6></h6>• <b></b>, <i></i>, <em></em>
• <head></head>• <body></body>• <header></header>• <nav></nav>• <footer></footer>• <div id=“”></div>
Lists Links & Images
• <ul><li></li><li></li>
</ul>• <ol>
<li></li><li></li>
</ol>
• <a href=“url”>Link</a>
• Anchor Links: <a name=“internal”>Text</a><a href=“#internal”>Link</a>
• <img src=“url” alt=“ “></img>
Comments
<!-- This is a comment -->
Text Tags
Heading Tags <h1>Heading 1</h1> - <h6>Heading
6</h6>
Used for titles, subtitles to create a hierarchy in the content
Inherent font-size with h1 the largest and h6 the smallest
Don’t skip heading numbers
Paragraph Tag <p>Text text text text </p>
Encompasses big blocks/paragraphs of text. Use a
<p></p> for every paragraph/text block
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<title>Hello HTML World</title>
</head>
<body>
<h1>Title of Essay</h1>
<p>Name</p>
<p>Date</p>
<h2>First Subtitle or Subsection</h2>
<p>First Paragraph</p>
<h2>Second Subtitle or Subsection</h2>
<p>Second Paragraph</p>
</body>
</html>
Lists
Ordered Lists : Numbered
<ol>
<li>List Item
1</li>
<li>List Item
2</li>
</ol>
Unordered Lists : Bullet Pts.
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
</ul>
Nested Lists
<ul>
<li>List Item 1</li>
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
<li>List Item 2</li>
</ul>
• List Item 1
• Sub Item 1• Sub Item 2
• List Item 2
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<title>Hello HTML World</title>
</head>
<body>
<h1>Title of Essay</h1>
<p>Name</p>
<p>Date</p>
<h2>First Subtitle or Subsection</h2>
<p>First Paragraph</p>
<h2>Second Subtitle or Subsection</h2>
<p>Second Paragraph</p>
<p>Key Things:</p>
<ul>
<li>Key Thing 1</li>
<li>Key Thing 2</li>
</ul>
</body>
</html>
Links
• <a href=“http://www.uiuc.edu”>UIUC</a>
• <a href=“../internal/index.html”>
Homepage</a>
• <a href=“#top”>Go to top</a> • Set by <a name=“top”>This is the top</a>
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<title>Hello HTML World</title>
</head>
<body>
<h1><a name=“top”>Title of Essay</a>/h1>
<p><a href=“aboutme.html”>Name</a></p>
<p>Date</p>
<h2>First Subtitle or Subsection</h2>
<p>First Paragraph</p>
<h2>Second Subtitle or Subsection</h2>
<p>Second Paragraph</p>
<p>Key Things:</p>
<ul>
<li><a href=“http://www.keything.com”>Key Thing
1</a></li>
<li>Key Thing 2</li>
</ul>
<a href=“#top”>Back to Top</a>
</body>
</html>
Images
Almost every website uses images, and a website without images is pretty boring.
<body> <p>What is the plural of TARDIS?</p> <img src=“tardis.jpg” /></body>
<body> <a href=“../internal/some_file.html”> <img src=“tardis.jpg” /> </a></body>
Images as link/anchor:
The <img> tag does not have “content”. It is an empty element.
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<title>Hello HTML World</title>
</head>
<body>
<h1><a name=“top”>Title of Essay</a>/h1>
<p><a href=“aboutme.html”>Name</a></p>
<p>Date</p>
<img src=“titleimage.jpg” />
<h2>First Subtitle or Subsection</h2>
<p>First Paragraph</p>
<h2>Second Subtitle or Subsection</h2>
<p>Second Paragraph</p>
<p>Key Things:</p>
<ul>
<li><a href=“http://www.keything.com”>Key Thing
1</a></li>
<li>Key Thing 2</li>
</ul>
<a href=“#top”>Back to Top</a>
</body>
</html>
Comments
Comments are a way for you to make notes in your HTML code. They are never shown in the web browser. You can also comment out existing code instead of deleting it.
<body> <!–- This is a comment. It is not displayed. --> <p>This text is shown in the web browser.</p></body>
<body> <!–- This comment is temporarily removing this code.
<p>This text is shown in the web browser.</p> --></body>
<Div> element
<div> elements allow you to designate containers around elements that you want to control in CSS.
IDs<div id=“someDIV”> <!-- any HTML element can go in here --></div>
Class<div class=“someotherDIV”>
<!-- any HTML element can go in here --></div>
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<title>Hello HTML World</title>
</head>
<body>
<div id=“top”> <h1><a name=“top”>Title of Essay</a>/h1>
<p><a href=“aboutme.html”>Name</a></p>
<p>Date</p>
<img src=“titleimage.jpg” />
</div>
<h2>First Subtitle or Subsection</h2>
<p>First Paragraph</p>
<h2>Second Subtitle or Subsection</h2>
<p>Second Paragraph</p>
<p>Key Things:</p>
<div class=“list”>
<ul>
<li><a href=“http://www.keything.com”>Key Thing 1</a></li>
<li>Key Thing 2</li>
</ul>
</div>
</body>
</html>
What is CSS?
CSS=Cascading Style Sheet
CSS is used to describe the look and formatting of a markup language,
such as HTML.
CSS was developed primarily to allow for a separation of the document
content from the document presentation.
Benefits of separating content from presentation:• Improved accessibility
• Cleaner webpages
• More control over the look of the website
• Easier to update
Linking Your css and html
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<title>Hello HTML World</title>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
<p>Hello world!</p>
</body>
</html>
CSS rules
h1 {color: blue; font-size: 1em; }
Selector Declaration Declaration
{property: value;}
Types of Selectors
HTML Elements : h1Div ID : #idDiv Class : .class
Common CSS Declarations
TEXTFont color {color: #efefef;}Font type {font-family: }Alignment {text-align: center;}
{text-align: right;} {text-align: justify;}
Indent {text-indent: 50px;}
LayoutPadding {padding: 10px;}Margin {margin-bottom: 10px}Border {border: 1px solid #000;}Background-color {background-color: #efefef;}
OtherComments /* comment */
@charset "utf-8";
h1 {color: #0000FF;
size: 2em;
weight: 900;
}
h2 {border-bottom: 2px solid #0000FF;
}
p {text-indent: 50px;
margin: 5px;
}
#top { padding-bottom: 10px;
}
.list { border: 1px solid #000000;
}
Browser Tools
Use built-in browser tools to see how
sites work:
Ctrl or Command + U will display the source
code in most browsers
Right-clicking or Ctrl-clicking and selecting
“Inspect Element” will usually reveal the
code for a particular object
Validators & Accessibility tools
http://validator.w3.org/ HTML
http://jigsaw.w3.org/css-validator/ CSS
http://fae.cita.uiuc.edu/ Accessibility
http://wave.webaim.org/ Accessibility
Questions, comments, concerns…
Thank you for listening!
GSLIS also offers a HTML workshop via Blackboard Collaborate.
Additional info for learning HTML:
W3C Tutorials
http://www.w3schools.com/css
Lynda Tutorials
http://go.illinois.edu/lynda
Stack Overflow
http://stackoverflow.com/
Code Academy
http://www.codecademy.com/
30 Days to Learn
http://freecourses.tutsplus.com/30-days-to-learn-html-and-css/
Questions, comments, concerns…
Thank you for attending our workshop!
Check out these resources to teach yourself
more about web design: urli.st/moo
Contact GSLIS Help Desk:
help@support.lis.illinois.edu
Feedback is always appreciated!
http://go.illinois.edu/itdfeedback
Recommended