instructional technology & design office [email protected] 217-244-4903 or 800-377-1892

Instructional Technology & Design Office

[email protected]

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

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>



</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>


</ul>

Nested Lists

<ul>


<ul>

<li>Sub Item 1</li>

<li>Sub Item 2</li>

</ul>


</ul>

• List Item 1

• Sub Item 1• Sub Item 2

• List Item 2

<!DOCTYPE html>

<html>

<head>



</head>

<body>

<h1>Title of Essay</h1>

<p>Name</p>

<p>Date</p>





<p>Key Things:</p>

<ul>

<li>Key Thing 1</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>



</head>

<body>

<h1><a name=“top”>Title of Essay</a>/h1>

<p><a href=“aboutme.html”>Name</a></p>

<p>Date</p>





<p>Key Things:</p>

<ul>

<li><a href=“http://www.keything.com”>Key Thing

1</a></li>


</ul>

<a href=“#top”>Back to Top</a>

</body>

</html>

http://www.keything.com/

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>



</head>

<body>

<h1><a name=“top”>Title of Essay</a>/h1>


<p>Date</p>

<img src=“titleimage.jpg” />





<p>Key Things:</p>

<ul>

<li><a href=“http://www.keything.com”>Key Thing

1</a></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”> </div>

Class<div class=“someotherDIV”>

</div>

<!DOCTYPE html>

<html>

<head>



</head>

<body>

<div id=“top”> <h1><a name=“top”>Title of Essay</a>/h1>


<p>Date</p>

<img src=“titleimage.jpg” />

</div>





<p>Key Things:</p>

<div class=“list”>

<ul>

<li><a href=“http://www.keything.com”>Key Thing 1</a></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>



<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

http://validator.w3.org/



http://jigsaw.w3.org/css-validator/

http://jigsaw.w3.org/css-validator/

http://fae.cita.uiuc.edu/

http://wave.webaim.org/

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/






http://freecourses.tutsplus.com/30-days-to-learn-

http://freecourses.tutsplus.com/30-days-to-learn-

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:

[email protected]

Feedback is always appreciated!

http://go.illinois.edu/itdfeedback

instructional technology & design office [email protected] 217-244-4903 or 800-377-1892

Documents