Download Dr. Ibrahim Yucel COM 420

Module 2: HTML
Dr. Ibrahim Yucel COM 420
First a look at IT through History
What the Video Demonstrates
While new technology offers great advantages,
It can be very difficult for those who are not
familiar with it to adjust. Knowledge that experts
take as common sense are lost to a person
with no foundation to build on. For this reason
we will be covering the very simple basics of
HTML before moving on to more complex
topics.
Practicing HTML
I want to note that you can practice your HTML
on your computer without uploading it to a web
server. HTML can be made with any simple text
editor (like notepad for Windows, TextEdit for
Mac OS X). Just change the extension of your
file from .txt to .htm or .html and a web browser
can open it to show you what your html file
looks like.
IDEs
In addition to text editors, web designers like to use IDEs
(Integrated Development Environments) to build more
complicated websites. IDEs can highlight tags, format
whitespace, suggest tags, and completely write code for
you.
While I do not prohibit the use of IDEs, if you
are new to HTML I suggest starting with a Text editor or a
simple IDE like Notepad++ until you have an understanding
of HTML.
For example, a common mistake among first time users of
Dreamweaver is to enter html code into the design view.
Anything typed in the design view is automatically coded,
so your "code" is just text in your HTML document.
Summary
● Summarize the basics of HTML for web
development
● Describe the how and why of Linking
● Summarize the use of fonts
● Some basic design strategies when writing
HTML
HTML History
● Markup languages were
used to encode formatting of
documents for high quality
printers.
○ GML (Generalized Markup
language) was one early
approach by IBM.
○ Script (for IBM
Mainframes)
○ Runoff and Scribe (DEC
mainframes)
○ nroff and troff (for Unix
systems)
● 1986
○ SGML the predecessor to HTML
is finalized by the ISO
(International
Organization for
Standardization - NOT an
acronym. ISO is Greek for
equal)
● 1989 - HTML is proposed
● 1993
○ HTML is incorporated into
the Mosaic browser
Recent HTML History
● 1997 - HTML 4.0 Provisions for Frames, scripts, style sheets and
other improvements...
● 2004 - Work starts on HTML 5. 2014 is the release date.
○ HTML5 is ready to be used, although not officially finished
○ HTML5 adds massive support for interaction and graphics. It will
be fighting Flash as the dominant multimedia tech on the web
http://ishtml5readyyet.com/
HTML5 Videos
What is HTML 5
5 Reasons to use HTML5
Suggested Discussion Topics
What are the changing trends with how people
consume the web?
How will these trends influence the choices
designers have to make?
What are the Pros and Cons of Flash VS.
HTML5?
What will the future of the web look like?
HTML5
● HTML5 elements must be properly nested
● HTML5 elements must always be closed
● Best practices call for an end tag or the start tag
must end with />.
● HTML5 elements must be in lowercase
● HTML5 documents must have one root element
HTML Tag Syntax
● How many of you have used the view source command on a
website you visited?
● Many pages are now dynamic, and may hide much of their
functionality, since HTML has been STRICTLY MARKUP. It will
not interact with the user, only setup the page to view. Javascript,
php, flash and other technologies are all used to make pages
dynamic. CSS also can hide styles used. A result is that much of
what you can see in the HTML source may not tell you the whole
picture on how a site works.
● Why would you want to hide your websites source code?
HTML Tag Syntax
HTML tags can either be
● Singular
● Container
Singular example
Horizontal Rule tag (hr tag)
<hr /> (Notice the space between r and /)
This will create a horizontal line to appear on the
page at the same point in the page text where the
tag appears in the source
HTML Tag Syntax
Container tags come in two
parts:
1. The initial part will contain
any attributes and
arguments.
2. The second part is typically
just the tag name,
preceded by a slash (/)
character.
Container tags affect
whatever part of the
document they contain.
Example:
The bold tag
<b> bold text </b>
everything in the container is
bold.
Attributes
This not the greatist
code in the world, no,
its just attributes...
Some tags may have attributes which allow you to set
arguments for how you want the text displayed.
I.E. the Font tag
<font color=red> This is red text </font>
Now how would you create bold red text?
- by nesting the tags.
Best Practice: White space
Don't do this
Do this
<p>Steps to take:</p>
<ul><li>step 1<li>step 2<li>step
3</ul> <p>Those are the steps.
</p>
<p>Steps to take:</p>
<ul>
<li>step 1</li>
<li>step 2</li>
<li>step 3</li>
</ul>
<p>Those are the steps.</p>
Future designers of your page
will thank you.
Structural Tags
a HTML Document document is enclosed between HTML tags, which
define the version of html being used in the document.
Within html tags this we have the head and body tags
<html>
<head>
info about the page here, such as the title tag
</head>
<body>
Text and body here
</body>
</html>
Attributes and Arguments
These are added into a tag. EX <body attribute=argument>
Attribute/Argument
Example
BGCOLOR
bgcolor=Black
Background
background="sunylogo.jpg"
text
text=green
link, alink, vlink
link=white alink=red vlink=blue
Other Useful Structural tags
Paragraph tag - <p> This is a paragraph </p>
Line break tag - <br />
Comment tag - <!-- I put a comment here. -->
Title - <title>My Web Page</title>
img - <img src="mypic.gif" width=100 height=100 border=0>
Others can be found in the link below
http://www.w3schools.com/tags/default.asp
- HTML Alphabet
What is a Hyperlink?
The web is a collection of
documents which are connected
via hyperlinks
Hyperlinks work because of
unique address known as uniform
resource locators, or URLs
A link is a unidirectional pointer
from the source document that
contains the link to some
destination
Fun Fact
The reason Google algorithm was so innovative
is because it understood that links were made
by people to point to important information, and
does not only rely on keywords. The more links
to a page from other high ranked pages meant
that a page was a good source of information,
and got a high ranking on google. Links are the
glue of the Internet!
http://infolab.stanford.edu/~backrub/google.html
Creating Hyperlinks
Example
<a href="http://www.sunyit.edu">SUNYIT</a>
a - stand for anchor. It begins the attachment to another page
href - hypertext reference, this is where the link goes
http://www.sunyit.edu - The FULL address of the link
Display Characteristics
You can change the color of links
on a page using link, vlink, and
alink.
Example:
<body link="#008080" vlink="
#FF8000" alink="#8000FF">
These can be overwritten by
the browser.
Absolute vs. Relative
Absolute - is the complete URL, indicates the exact location on the web
Example : <a href="http://www.sunyit.edu">SUNYIT</a>
a Relative URL gives the location of the object relative to the location of
the page the URL is located
Example: <a href="about.html">About Me</a>
Would link to a new page in the same folder as the current one
Web site file structure
A website directory is much like that on your personal computer, and
URL can use the file structure to organize a web page.
This is especially helpful to keep all your images for your site in one
folder.
<a href="http://www.animals.com/pets/dogs.html">
Relative URL shortcuts
If you need to reference a file that is higher up in the file tree than your
current location you can use ../
Example:
<a href="../beagles/hunting.html>
Will go up one level, then down into beagles and get the hunting.html
file.
Use it more than once to go up multiple levels
<a href="../../profile/me.html>
Discussion Topic
Which Links should you use?
That are some issues with Relative and Absolute links?
Linking to a Particular Point in a
Document
Use an Anchor
Step 1in document1.html
<a href="document2.html#pointA">jump from here</a>
Step 2in document2.html
<a name="pointA"></a>
how would you link to a place in the same document?
<a href="#pointA">jump below</a>
Using Images in an Anchor
Example:
<a href="http://www.lycos.com/">
<img src="images/lycoslogo.gif" width=115 height=32
border=0>
</a>
This makes the image a hyperlink
Email Links
<a href="mailto:<yourid>@sunyit.edu">E-mail Me</a>
Why shouldn't you do this?
Spammers can read this email and flood you address with spam.
I suggest implying your email address so human intellegence is
needed to understand it.
I.E. my address is <mylastname>[email protected]
Title Attribute - Anchors
This attribute allows you to put tooltips as users hover over links.
<a href="students/index.htm"
title="information">Students</a>
Fonts and HTML
If you leave the font face alone the browser will choose the default font
face, size and color. By doing so you allow the user to control the
viewing of the content. However you might want the site to have a
specific style. In this case you use the following attributes.
Font Size and Style
Specify the actual font size
<font size="n"> where n is 1 to 7
Specify the relative Font Size
<font size="+n"> <font size="-n">
Face is used to control which font you want to use
<font face="Verdana">
Other common Font tags
● <b> . . .</b> -- Bolded text.
● <big>. . .</big> -- Increases base font size by 1.
● <i> . . .</i> -- Italicized text.
● <u> . . .</u> -- Underlined text.
● <em>. . .</em> -- Emphasized text; normally italicized text, but may
vary with different browsers; for an audio browser it tells the browser
to emphasize the text in an audible manner.
● <small>. . .</small> -- Decreases base font size by 1.
● <strong>. . .</strong> -- Normally displayed as bold text, but the
voice in an audio browser will be affected by becoming louder,
deeper, etc.
● <sub>. . .</sub> -- Subscript
● <super>. . . </super> -- Superscript
Headings
Headings are used to convey importance (like a title or section) and
decrease in importance and size as the heading number increases.
<h1> ... </h1>
<h2> ... </h2>
<h3> ... </h3>
<h4> ... </h4>
<h5> ... </h5>
<h6> ... </h6>
Headings Continue
You should always use headings to define the text structure of your
document. Heading one should be used only once, for the title of the
page. Heading 2 should be used to define each main section of the
page. Heading 3, 4, and so on should be used for further subdivisions.
Don't skip a heading, going from heading 2 directly to heading 4, for
example.
Font Colors
You may change colors in HTML via color name or Hexadecimal code
for that color.
Colors names accepted include
Black, White, PeachPuff, Red, Firebrick, OrangeRed, Blue,
MidnightBlue, CornflowerBlue, Cyan, Green, DarkGreen, SpringGreen,
Yellow, DarkGoldenrod, Gold, Burlywood, Purple, Orchid, Magenta,
BlueViolet
Also use the Kuler site to get sets of color themes and the Hexadecimal
code
http://kuler.adobe.com/
<font color="Colorname">text</font>
Background Color - Fonts
Remember: A high contrast between the background and foreground
is ideal. <!-- red background --> <body bgcolor="#FF0000">Would
change the background red.
Where can I learn more about
HTML?
You can google most tags to find definitions on that they do, However If
you need more help in learning some basic tags and their use I suggest
the lessons here http://www.w3schools.com/html/default.asp
For an editor's draft of HTML5 and its changes you can find them
here and your textbookhttp://dev.w3.org/html5/markup/