an introduction to HTML and CSS

Transcript an introduction to HTML and CSS

Instructional Technology & Design Office
[email protected]
217-244-4903 or 800-377-1892
Insert Workshop Name
Presented by Your Name Here
Beginning Web Design:
an introduction to HTML and CSS
Fall 2013 ITD Workshop
PURPOSE +
LEARNING OBJECTIVES
Scope:
Agenda:
-
Introduction of HTML/CSS
Basic code elements
Current code/design standards
Last 20 minutes: working on a webpage together
SOME THINGS YOU WILL NEED
1.
A code editor
-
For Macintosh:
o Text Wrangler
-
For Microsoft Windows:
o Notepad++
2.
Some simple-text editors will work (e.g., TextEdit)
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.
HTML AS MARKUP LANGUAGE
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>
BASIC HTML TAGS
Text
Structural
• <p></p>
• <h1></1> - <h6></h6>
• <b></b>, <i></i>, <em></em>
•
•
•
•
•
•
Lists
Links & Images
• <ul>
• <a href=“url”>Link</a>
<li></li>
<li></li>
</ul>
• <ol>
<li></li>
<li></li>
</ol>
Comments

<head></head>
<body></body>
<header></header>
<nav></nav>
<footer></footer>
<div id=“”></div>
• Anchor Links:
<a name=“internal”>Text</a>
<a href=“#internal”>Link</a>
• <img src=“url” alt=“ “></img>
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
LISTS
Ordered Lists : Numbered
<ol>
Unordered Lists : Bullet Pts.
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
</ol>
<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
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>
IMAGES
<body>
<p>What is the plural of TARDIS?</p>
<img src=“tardis.jpg” alt=“tardis”
width=“220” height=“293” />
</body>
<DIV> ELEMENT
<div> elements allow you to designate containers around elements that you
want to control in CSS.
IDs
<div id=“someDIV”>

</div>
Class
<div class=“someotherDIV”>

</div>
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; }
Selecto
r
Declaration
Declaration
{property: value;}
Types of Selectors
HTML Elements
Div ID
Div Class
:
:
:
h1
#id
.class
COMMON CSS DECLARATIONS
TEXT
Font color {color: #efefef;}
Font type {font-family: }
Alignment {text-align: center;}
{text-align: right;}
{text-align: justify;}
Indent
{text-indent: 50px;}
Layout
Padding {padding: 10px;}
Margin
{margin-bottom: 10px}
Border
{border: 1px solid #000;}
Background-color {background-color: #efefef;}
COMMENTS
Comments are a way for you to make notes in your code. They are never shown
in the web browser.
HTML Comments
<body>
<!–- This is a comment. It is not displayed. -->
<p>This text is shown in the web browser.</p>
</body>
CSS Comments
/* This is a comment in CSS.*/
VALIDATORS &
ACCESSIBILITY TOOLS
QUESTIONS, COMMENTS,
CONCERNS…
Thank you for attending our workshop!
Contact GSLIS Help Desk:
[email protected]
Feedback is always appreciated!
http://go.illinois.edu/itdfeedback

an introduction to HTML and CSS

Transcript an introduction to HTML and CSS

Directory