HTML

Download Report

Transcript HTML 

Learning a New Language: HTML
Spring 2013 ITD Workshop
PURPOSE +
LEARNING OBJECTIVES
This is an introduction to creating static webpages. Since libraries
are increasingly moving toward web content, web content
management is a skill that is useful and will make you more
marketable.
What you will (hopefully) learn:
-
What HTML and CSS are
Some important terminology
Coding standards
To read and edit basic HTML code, such as web site
templates
SOME THINGS YOU
WILL NEED
1.
A code editor
-
For Macintosh:
o Text Wrangler
-
For Microsoft Windows:
o Notepad++
2.
Any simple-text editor will work (e.g., TextEdit, Notepad)
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, the cool British computer science who created
the World Wide Web, was the pioneer of HTML. It became
standardized in November 1995 as HTML 2.0.
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 is not a scripting language.
HTML AS MARKUP
LANGUAGE
HTML is written in elements, which are specific to the language itself, and
each element typically 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
<tag attribute=“value”>content</tag>
Empty elements (i.e., elements without content) do not have an end tag and
follow this form
<tag attribute=“value” />
HELLO_WORLD.HTML
<!DOCTYPE html>
<html>
<head>
<title>Hello HTML World</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
HELLO_WORLD.HTML
HEADING TAGS
Heading tags are used for titles and subtitles within the content of the
webpage. The font size gets smaller as the numbers get bigger.
<body>
<h1>Headings</h1>
<h2>are</h2>
<h3>great</h3>
<h4>for</h4>
<h5>titles</h5>
<h6>and subtitles</h6>
</body>
HEADING TAGS
What is wrong with this picture?
HEADING TAGS
All tags come in pairs!
TEXT
FORMATTING TAGS
These are some of the commonest text formatting tags that add
emphasis to your content.
<body>
<p><strong>Bold
text</strong></p>
<p><em>Emphasized text</em></p>
<p><i>Italic text</i></p>
<p><u>Underlined text</u></p>
<p><del>Struckthrough</del></p>
<p><sup>Superscript</sup></p>
<p><sub>Subscript</sub></p>
</body>
USEFUL ATTRIBUTES
Align attribute allows you to align your content left, right or center. The
default is always left. CSS is making this attribute less popular.
<body>
<h2 align=“left”>Left</h2>
<h2 align=“center”>Centered</h2>
<h2 align=“right”>Right</h2>
</body>
USEFUL ATTRIBUTES
The title attribute adds a tiny text pop-up to any HTML element.
Search engines use this attribute to catalog your webpage as well as
increase your search ranking. This attribute is most often used with
images.
<body>
<h1 title=“Hi!”>Big Title Heading Tag</h1>
</body>
HYPERTEXT
REFERENCE (HREF)
A hypertext reference (href) is a link tag that directs a user to a valid URL.
<body>
<h3>This is a hyperlink:</h3>
<br />
<a href=“http://www.nytimes.com/”>NY Times</a>
</body>
HYPERTEXT
REFERENCE (HREF)
There are five different kinds of URLs you can use in the href attribute:
<a href=“http://www.uiuc.edu”>UIUC</a>
<a href=“../internal/index.html”>Homepage</a>
<a href=“#top”>Go to top</a>
<a
href=“mailto:[email protected]?subject=“I
need help”>GSLIS Help Desk</a>
<a href=“http://www.uiuc.edu/some_file.zip”>Download
this file</a>
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>
IMAGES
Almost every website uses images, and a website without images is pretty
boring.
The <img> tag does not have “content”. It is an
empty element.
<body>
<p>What is the plural of TARDIS?</p>
<img src=“tardis.jpg” />
</body>
Images as link/anchor:
<body>
<a href=“../internal/some_file.html”>
<img src=“tardis.jpg” />
</a>
</body>
IMAGE SOURCE URLS
The source of your images may be either global or local. But it is
good practice to make them all local.
Src Attribute Code
Explanation
src=“tardis.jpg”
Image is located in the same directory
src=“imgs/tardis.jpg”
Image is located in the imgs directory
src=“../tardis.jpg”
Image is located “up” a directory
src=“../imgs/tardis.jpg”
Image is located “up” a directory in
another directory called imgs
src=“http://www.uiuc.edu/
tardis.jpg”
Image is located at a specific URL
elsewhere; this is known as a “global”
location
ATTRIBUTES OF THE
<IMG> TAG
You can specify the exact width and height of the image.
<img src=“tardis.jpg” width=“220” height=“293” />
Two things to note about specifying the dimensions of an image:
• Always use the same ratio of width to height
• Always scale downward – bigger images scale down nicely, but
smaller images will become pixelated if you make them much bigger
The alt (alternative) attribute allows you to display alternate text if the image
does not load for some reason.
<img src=“tardis.jpg” alt=“The TARDIS” />
UNORDERED LISTS
There are different types of lists in HTML.
The unordered list is named so because its items are not numbered. Its items
are displayed with bullet points.
<body>
<h3>Today’s Task List</h3>
<ul>
<li>LIS501 homework</li>
<li>LIS506 assignment</li>
<li>Exercise</li>
<li>Do the cleaning</li>
</ul>
</body>
ORDERED LISTS
The items of an ordered list are numbered.
<body>
<h3>Goals</h3>
<ol>
<li>Finish school</li>
<li>Get a job</li>
<li>Make money</li>
<li>Get own place</li>
</ol>
</body>
LIST ATTRIBUTES
For unordered lists, you can specify which type of bullet point you would like by
using the type attribute in the ul tag.
<ul type=“circle”> […] </ul>
<ul type=“square”> […] </ul>
<ul type=“disc”> […] </ul>
For ordered lists, you can pick a starting number other than 1 by using the start
attribute.
<ol start=“3”> […] </ol>
If you want something other than numbers in the ordered list, you can choose
among a few other options like alphabetical or roman numerals.
<ol type=“a”> […] </ol>
<ol type=“i”> […] </ol>
<ol type=“A”> […] </ol>
<ol type=“I”> […] </ol>
TABLES
The HTML element table is composed of rows and columns. This element is a
container element, which means it can contain other elements.
<table border=“1”>
<tr>
<td>Row 1/Cell
<td>Row 1/Cell
</tr>
<tr>
<td>Row 2/Cell
<td>Row 2/Cell
</tr>
</table>
1</td>
2</td>
1</td>
2</td>
Note: Do not use tables to structure the entire content of your
webpage. This practice is now considered old fashioned.
<DIV> ELEMENT
The <div> element is nothing more than a container. Web developers now use
<div> elements to arrange content on webpages instead of <table> elements.
This will become important to you once you’ve learned more CSS.
<div id=“someDIV” name=“someDIV” title=“DIV Element”>
<!-- any HTML element can go in here -->
</div>
<div> elements can be nested in one another.
HTML WEB FORM
ELEMENTS
Web forms, which are those parts of a webpage where users enter
some input, are created in HTML but require some scripting language
to interpret the user’s input.
Some examples of web forms:
Credential authentication (e.g., a login screen)
Search functionality on webpages
Web applications
This is outside of the scope of this workshop. Web forms are a more
advanced feature of HTML that are only necessary when using a
scripting language like PHP.
HTML VS. XHTML
XHTML = Extensible HyperText Markup Language
Until version 5.0, HTML was based on Standard Generalized Markup
Language (SGML) standards.
XHTML, which is replacing HTML, is based on the Extensible Markup
Language (XML) standards.
What this means for you:
•
•
•
Tags remain the same as in HTML 5.0
There are stricter rules in the coding
• Everything must be lowercase
• All tags are closed and nested
There are other more technical differences, too.
WHAT IS CSS?
CSS = Cascading Style Sheet
CSS files are separate from HTML files, but they are “included in” the HTML
file.
It is best practice to use CSS for all formatting in your HTML files. This is the
current trend….
Some HTML tags are becoming depreciated because of CSS. A few
examples:
- <font>
- Lists: <ul>, <il>, …
- <table> as used for main content structure
- Align attribute and other formatting attributes
THE CSS WORKSHOP
The Instructional Technology & Design (ITD) Office occasionally
offers a workshop on CSS.
Some other helpful resources:
- W3C Tutorials
http://www.w3schools.com/css
- Lynda Tutorials
http://go.illinois.edu/lynda
QUESTIONS, COMMENTS,
CONCERNS…
Thank you for attending our workshop!
Contact GSLIS Help Desk:
[email protected]
Information on this presentation
Adam Mann: [email protected]
Steven Smidl : [email protected]
Feedback is always appreciated!
http://go.illinois.edu/itdfeedback