Scribd
Upload
19 views

HTML 2011

The document provides an introduction to HTML, explaining that HTML was created to mark up and structure text documents to be shared on the early internet, allowing for formatting, links, and multimedia content. It covers basic HTML tags for formatting text, images, links, lists, and tables, and how these tags can be used along with attributes to structure and style web pages. The document uses examples to demonstrate how different HTML elements and tags can be combined to create formatted and structured web pages.

Uploaded by

aizirekumutbekova
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
19 views

HTML 2011

The document provides an introduction to HTML, explaining that HTML was created to mark up and structure text documents to be shared on the early internet, allowing for formatting, links, and multimedia content. It covers basic HTML tags for formatting text, images, links, lists, and tables, and how these tags can be used along with attributes to structure and style web pages. The document uses examples to demonstrate how different HTML elements and tags can be combined to create formatted and structured web pages.

Uploaded by

aizirekumutbekova
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 39

Introduction to HTML

A bit of history…
• The world wide web began as a way to share
documents on the internet (which was
starting to gain a foothold with other
functionality like email & newsgroups).
• It was introduced in 1990 by English
physicist Tim Berners-Lee and Belgian
computer scientist Robert Cailliau while both
were working at CERN.
HyperText Markup Language
• Initially, the documents that were shared on the
WWW were text documents that were “marked-up”
with extra tags to define the structural or visual
aspects of the document.
• Another effect of this language was to add extra
functionality into the document, such as links to
other online pages, creating a network of
interconnected documents (this is the “hypertext”
portion of the html name).
Fast-forward to now…
• As computer technology and the WWW have
evolved, html has continued to allow the
content of web pages to evolve.
• Aside from just links, we now enjoy
multimedia content and applications that are
seamlessly integrated into dynamic web
pages, allowing the WWW to do much more
than facilitate the sharing of documents.
Overview of HTML
• Files have the .html or .htm extension.
• Files can be composed in ordinary text
editors.
• Subsets of the text can be enclosed in “tags”
to give that portion of text some structure or
functionality:
<tag>blahblahblah</tag>
• Tags have the general form:
<tagname attribute1=“value1” attribute2=“value2”>
An Example
The following code: Would look like:
<html>
<title>Example</title>
<body>
Hello World
</body>
</html>
Some Formatting Tags
• <p>, </p> - start and end of a paragraph
• <b>, </b> - start and end of bold text
• <i>, </i> - start and end of italicized text
• <u>, </u> - start and end of underlined text
• <br> - insert a line break to override the
default behavior of just wrapping the text
around to the next line.
Some More Formatting Tags
• <h1> , </h1> - set enclosed text to be a
“Level 1 heading” (also <h2>, <h3>, etc.)
• <font> , </font> - set font for enclosed text
with style options set in tag. i.e. -
<font face = “Arial” color = “blue” size = “10”>blahblahblah</font>
• Note: web browsers ignore all but the first
space between pieces of text, and any line
breaks in your .html file. It is the tags you
include which determine how the page will
look, not the way it looks in your text editor.
Another Example
<html>
<title>Example #2</title>
<body>
<p><h1>Level 1 heading</h1></p>
<p><h2>Headings are already
<b>bold</b> but not
<i>italicized</i></h2>
Here is a line of text.
It seems like this should be
on a new line, but it's not.
<br>
<font face = "arial" size = "3"
color = "blue"> You need to
use a line break to make a
new line or else the text
wraps around when it reaches
the right side of the
window. </font> The font tag
changes the look of your
text.
</body>
</html>
Lists
Unordered List
<ul>
<li>First Item
<li>Second Item
<li>Third Item
</ul>
<p>
Ordered List
<ol>
<li>First Item
<li>Second Item
<li>Third Item
</ol>
Images
• Obviously, additional content besides text is crucial
to an effective webpage.
• Images can be added to your page with the <img>
tag : <img src=“file location”>
• The file’s location can be a URL for its location on
the internet or its location on a local disk.
• Ex: <img src=“http://cramer.ccr.buffalo.edu/logos/ccr_logo.jpg”>
would look like:
Links
• Links enable the web to be a network of
interconnected documents, rather than a
static collection of pages.
• Links use the <a> , </a> tag (short for
anchor) and can link to other pages, other
locations in the current page, or even an
email address.
Linking to Another Web Page
• You can enclose some text with the <a> tags
to make it a link, and you must provide a
destination for that link to point to using the
href attribute:
<a href=“some url”>link text</a>
• Example:
<a href=“http://www.ccr.buffalo.edu”>CCR</a>
Would translate to: CCR
Linking to Another Web Page
target="_blank“ Opens new page in a new browser
window
“_self“ Loads the new page in current
window
“_parent“ Loads new page into a frame that
is superior to where the link lies
“_top"Loads new page into the current
browser window, cancelling all frames

<a href="http://www.sicom"target="_blank">
SI.COM</a>
Linking Elsewhere In The Page
• The anchor tag can be used to name a
location in your document:
<a name=“topofpage”></a>
• A link later on in the document can refer to
this anchor by name and take the reader
there: <a href=“#topofpage”>Back to top</a>
Linking To An Email Address
• Instead of pointing to the URL of another
webpage, or a location in the current
document, the href attribute can point to an
email address:
<a href=“mailto:emailaddress” >
• Ex:
<a href=“mailto:[email protected]”>Send me an email</a>
Would look like:
Send me an email
Using Images as Links
• Like other tags, the <a> and <img> tags can
be nested so an image can function as the link
activator instead of text:
<a href=“http://www.ccr.buffalo.edu”>
<img src=“http://cramer.ccr.buffalo.edu/logos/ccr_logo.jpg”>
</a>
Would yield:
Tables
• More than just adding a table for data, html
tables can be used to structure the text,
images, links, etc. that make up your
webpage.
• You can use tables to define the layout for
your page, and then fill the appropriate table
cells with the content you want.
• A table is defined with <table> & </table>.
Within the table, rows are defined with <tr>
& </tr> . Within each row, cells are defined
with the <td> & </td> tags.
A Table Example
<b>Table</b><br>
<table>
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
</tr>
<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>
</tr>
<tr>
<td>Row 3, Col 1</td>
<td>Row 3, Col 2</td>
</tr>
</table>
Some Refinements
• Well, that table seemed to help with the
layout, but it could definitely look better.
• There are lots of attributes that can be
modified to adjust the look and layout of
your table. Some of these are illustrated in
this next example.
Attributes
• Attributes amplify tags. That is, when a browser
interprets a tag, it will also search for attributes and
then display the element (tags+attributes).
• Examples: background color, table width

– <h2 align="center">Centered Heading</h2>


– <h2 title="Hello There!">Title Heading Tag</h2>

What does these do?


Attribute Options Function
align right, left, center Horizontal alignment
valign top, middle, bottom Vertical alignment
bgcolor numeric, RGB values Background color
width Numeric Width of tables, images, or table cells.

height Numeric Height of tables, images, or table cells.


<b>Table</b><br>
<table border width=400>
<tr>
<td width=150 align=left>Row 1, Col 1</td>
<td width=250 align=right>Row 1, Col 2</td>
</tr>
</table>
<table border width=400 height=50>
<tr>
<td width="60%" valign=top>Row 2, Col 1</td>
<td width="40%" valign=bottom>Row 2, Col 2</td>
</tr>
</table>
Multi-column and Multi-row
<table border="1">
<tr>
<td> Column 1 </td>
<td> Column 2 </td>
<td> Column 3 </td>
</tr>
<tr>
<td rowspan="2"> Row 1 Cell 1 </td>
<td> Row 1 Cell 2 </td>
<td> Row 1 Cell 3 </td>
</tr>
<tr>
<td> Row 2 Cell 2 </td>
<td> Row 2 Cell 3 </td>
</tr>
<tr>
<td colspan="3"> Row 3 Cell 1 </td>
</tr>
</table>
Cell padding
< table border="1" cellpadding="10“ bgcolor="rgb(0,255,0)“ >

<tr>
<td> Column 1 </td>
<td> Column 2 </td>
</tr>
<tr>
<td> Row 1 Cell 1 </td>
<td> Row 1 Cell 2 </td>
</tr>
<tr>
<td> Row 2 Cell 1 </td>
<td> Row 2 Cell 2 </td>
</tr>
</table>
Comments
• Tables can be given backgrounds using the bgcolor
attribute.
• Also, backgrounds are not limited to the <table> tag;
you can give separate backgrounds to <td> and <tr>.
• The <tr> tag must always be placed before the <td>
tag.
• As you see, good form is important in organizing the
table code. It may seem a bit complicated, but if you
keep everything organized it will be much easier to
manage later.
• <!-- A comment -->
Putting It All Together
• Each cell of a table can contain any other html
object: links, images, lists, etc.
• The code for this table is on the next slide.
<table width=800>
<tr>
<td width=640 height=84>
<img src="http://cramer.ccr.buffalo.edu/logos/ccr_logo.jpg">
</td>
<td rowspan=2>
<ul>
<li>Bioinformatics
<li>Consulting Services
<li>Grid Computing
<li>Visualization
</ul>
</td>
</tr>
<tr>
<td align=center valign=top>
<a href="http://www.ccr.buffalo.edu">CCR Website</a>
</td>
</tr>
</table>
Music Links
<embed src="Good Riddance (Time of Your
Life).wma" autostart=“true" loop="false"
volume="60" />
Exercise
Find the music files in your directory, and the
associated album covers.
Make a table with 3 columns, 2 rows, giving the
artist, cover image, and a link to the music file, for
each song.

/var/www/workshop/images for the cover images


/var/www/workshop/music for the music files.
Forms
• Input fields can have attributes that you should be
aware of.
• type - Determines what kind of input field it will
be: text, submit, and password.
• name - Assigns a name to the given field so that
you may reference it later.
• size - Sets the horizontal width of the field. The
unit of measurement is in blank spaces.
• maxlength - Dictates the maximum number of
characters that can be entered
Text Forms
<form method=“post”
action=“mailto:[email protected]”>
Name: <input type="text" size="10"
maxlength="40" name="name"> <br />
Password: <input type="password"
size="10" maxlength="10"
name="password">
</form>
Text Forms
Check Boxes
<form method="post"
action="mailto:[email protected]">
Select your favorite Movie.
<input type="checkbox" name=“mov"
value=“SawVI">Saw VI
<input type="checkbox" name=" mov "
value=“30Days">30 Days of Darkness
<input type="checkbox" name="mov "
value=“Dawn">Dawn of the Dead
<input type="checkbox" name="mov "
value=“Evil">The Evil Dead
<input type="submit" value="Email Myself">
</form>
Selection Form
<form method="post"
action="mailto:[email protected]">
Musical Taste <select multiple name="music" size="4">
<option value="emo" selected>Emo</option>
<option value="metal/rock" >Metal</option>
<option value="hiphop" >Hip Hop</option>
<option value="jazz" >Jazz</option>
<option value="classical" >Classical</option>
<option value="alternative" >Alternative</option>
<option value="oldies" >Classic Rock</option>
<option value="techno" >Techno</option>
</select>
<input type="submit" value="Email Yourself">
</form>
Actions
• For a submission button to accomplish anything it must be placed
inside of a form tag with an action and a method. The action is always
set to a server side scripting file such as a PHP, PERL, or ASP file.
• Another choice may be to set the action to mailto followed by an email
address, and the form will be emailed to the specified address. mailto
isn’t the action of choice usually, but it works fine for the examples
we’re doing here.
Actions
<input type="submit" value="Submit" /><br />
<input type="submit" value="Send" /><br />
<input type="submit" value="Submit Form" /><br />
Reset
The reset button yields a button that clears the form and allows you to start
over.

<input type="reset" value="Reset" />


Further Reading
• The are lots of resources on the web about HTML, so you can always
look up how to do something for your page.
• In some of the other talks this week, you’ll hear how you can integrate
some applications for your projects into your webpages.
• Some links:
http://www.tizag.com
http://html-codes.1keydata.com/
http://www.cse.buffalo.edu/faculty/miller/Courses/WWW-
Sem/Sp97/Presentations/HTML-Kempton/tutor/dir.html
http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/htmlinde
x.html
http://www.htmlcodetutorial.com/
http://www.htmlgoodies.com/primers/html/
http://www.jmarshall.com/easy/html/
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro

You might also like