slides 2 - html
DESCRIPTION
An introduction to HTML markup languageTRANSCRIPT
Introduction to: HTML
Fundamental Concepts
July 17, 2012
Web training for Ph.D. Students
@Unicam
Agenda
• Getting Started with HTML • How to create and view an HTML document? • The HTML basic tags • Background & naming documents • Headings, font size, alignment • Linking • Images • Tables • XML • Resource sites
HTML stands for…?
• HyperText Markup Language
– Hyper is the opposite of linear. HTML allows the person viewing the Web page to go anywhere, any time
– Text is what you will use
– Mark up is what you will do
– Language it's a language, really – but the language is plain English
What is HTML?
• HTML works in a very simple and logical way
• Reads from top to bottom, left to right
• Tells the browser what to do and what props to use
• HTML is written with text and tags
• Tags are used to set certain sections apart and to specify their format (e.g. bigger text, smaller text, bold text, underlined text…) – Learning HTML is learning the tag to perform whatever
command you want to do
HTML tags in a nutshell
• Tags… – …are like commands! – …are sorrounded with angle brackets
• <B> <I> <HEAD> …
– …come in pairs (in most cases): • Exceptions: <br>, <li> …
– …turn an action on (opening tag) and then off (closing tag) – …ending an action start with a forward slash:
• E.g. <B> text </B> make the "text" bold!
– …can be embedded: • <HEAD><TITLE> your text</TITLE></HEAD> (order is often mandatory!)
– …are not case sensitive – …can have attributes (most of them)
• E.g. <P align=«center"> centers the paragraph which follows the tag
– …can be supported in different ways by different browsers or cannot be supported at all (basic tags are always supported!)
Tags – behind the scenes
<B>Unicam</B> loves <I> U </I>
– <B> is the beginning bold tag – “Unicam" is the word being affected by the tag – </B> is the end bold tag. Exactly the same as the
beginning tag, except of the slash – The same goes for <I> which starts an italic section – Unless you view the page source the code is hidden
from view!!
Unicam loves U
Combine tags
• Tags can affect text at the same time – <B><I>Bold and Italic</I></B> gives you Bold and Italic
• When using more than one tag together: – make sure to begin and end both (without
interleaving)! – set the beginning and end tags at the same time – always placing them on the farthest end of the item
being affected – set commands at the farthest ends each time you add
them
Note that…
• Clearly, not everything on a web page needs to have tags
• If you forget to add an end tag it will be obvious when you view the document in your browser
– the entire document after the point where you forget the end tag will be affected!
– to fix it, go back into the document, add the slash, save, and then reload
Writing HTML
• By hand
– using tools such as NotePad on Windows
– OS X users can use TextEdit on the Mac
• using an HTML assistant program
– easier than by hand
– but harder to understand HTML because the program does all work
Naming HTML documents
• Basic format — name and suffix
• Follow this format to name your document: – Choose a name. Anything.
– Add a suffix. For all HTML documents, you will add either ".htm" or ".html"
• .html tells the computer that this file is an HTML document
• All files used on the Web will follow the format of "name.suffix"
HTML annotations
• Web page authors may write notes or describe what is happening within the HTML document
– these notes show in the HTML source, not the Web page display
– The format is the following:
• <!-- start of syllabus and definitions -->
Basic HTML document format
• Every HTML document starts with this tag: <HTML>
– next tags will always be these:
<TITLE> and </TITLE> (text in between shows up in the title bar at the top of the browser)
• Every page ends with the <HMTL> closing tag:
</HTML>
Basic HTML document format
• Every page starts with this tag to define the version being used (here HTML5): <!DOCTYPE html>
• Then it is followed by the tag: <HTML>
• Every page ends with the closing tag: </HTML>
Smallest example, ever!
<!DOCTYPE html>
<HTML>
<TITLE> MY TITLE </TITLE>
<B>THIS IS SOME BOLD TEXT!</B>
<I> THIS TEXT IS INSTEAD ITALIC! </I>
</HTML>
• Write a file with this HTML code, save it as .html file and open it in your browser!
Can you see something? Yes.. However some important parts are missing!!!
Tidy up…
• HTML files are is structured into two sections after tag <HTML>:
– HEAD
contains information about the document (e.g. the title, scripts, meta information and more)
– BODY
contains the content to be displayed on the web page, i.e. everything that must be displayed is inside the <BODY> tags
Complete smallest example
<!DOCTYPE html> <HTML> <HEAD> <TITLE> MY TITLE </TITLE> </HEAD> <BODY> <B>THIS IS SOME BOLD TEXT!</B> <I> THIS TEXT IS INSTEAD ITALIC! </I> </BODY> </HTML>
• NB: indentation is not mandatory, but it is important to improve the
readability!
Tag attributes
• Attributes provide additional information about HTML elements
• Attributes are always specified in the start tag one after the other, without commas or other punctuation
• Attributes come in name/value pairs like: name="value" (values should always be enclosed in quotes – double or single one!)
• Much like tags, attribute names and attribute values are case-insensitive (recommended lower-case though)
Body attributes
• The body tag can have the following attributes: – bgcolor: It can used for changing the background color
– background: It is used for specify the image to be displayed
– link: It indicates the color of the hyperlinks , which have not been visited
– alink: It indicates the color of active Hyperlinks, An active link is the one on which the mouse button is pressed
– vlink: It indicates the color of the hyperlinks after the mouse click on it
– text: It is used for specifying the color of the text displayed on the page
Colorise…
• Colors are defined using a hexadecimal notation (HEX) for the combination of (primary colors) Red, Green and Blue (RGB)
• The lowest value for a color is 0 (in HEX: 00); the highest is 255 (in HEX: FF).
– E.g.: FF FF FF (white), 00 00 00 (black), FF 00 00 (red), FF FF 00 (yellow) and so on...
Color names
• All the browsers supports also color names which can be used in place of hex.
• 147 color names are defined in the HTML color specification. 16 are basic colors
• Basic colors are:
– aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow
Smallest example, recolored
<!DOCTYPE html> <HTML> <HEAD> <TITLE> My page </TITLE> </HEAD> <BODY bgcolor="black" text="#ffff00"> <B>THIS IS SOME BOLD TEXT!</B> <I> THIS TEXT IS INSTEAD ITALIC! </I> </BODY> </HTML>
Headings
• Heading commands are used to create headings for sections and sub-sections in the document – there are six (6) heading commands: <H1> through
<H6> – <H1> is the largest and <H6> is the smallest – heading commands create nice, bold text with a
simple H# and /H# command
• When using a heading command you set the text alone – Browsers automatically add some empty space (a
margin) before and after each heading
Heading (cont.)
• Use HTML headings for headings only. Don't use headings to make text BIG or bold.
• Since users may skim your pages by its headings, it is important to use headings to show the document structure.
• H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.
Paragraphs
• HTML documents are divided into paragraphs
• Paragraphs are defined with the <P>…</P> tags
• Browsers automatically add an empty line before and after a paragraph
• To add a linebreak inside a paragraph use the tag
<BR/>
• BR is an empty tag, hence it has no end tag (and a final slash)
Formatting tags
• Some of the most important tags in the <body>. Permits to format the text.
• Most important are: – <b> bold text – <big> big text – <del> deleted text (strikethrough text and underline inserted) – <em> emphasized text – <i> italic text – <ins> inserted text – <small> small text – <sub> subscripted text – <sup> superscripted text – <u> underline text (Deprecated! Text can be confused with
hyperlinks!) – <address> contact information for the author/owner of a document – <code> computer code text
Smallest example, improved
<!DOCTYPE html> <HTML> <HEAD> <TITLE> MY TITLE </TITLE> </HEAD> <BODY BGCOLOR ="blAck" TEXT="#FFFF00"> <H1> My Ideas</H1> <B> Unicam </B> is <I>my</I> university.<BR/> <P> I think that it is also the university I <DEL>hate</DEL> ehr...<B><I>love</B></I> the most! :) </P> <H2> Question</H2> <P>Do you think that I can love another University??</P> </BODY> <HTML>
Font names and sizes
• HTML provides the flexibility of changing font size, color, etc.
• Every browser has a default font setting that governs the default font name, size and color
• HTML provides the <FONT> tag with attributes: – face: specifies the font family used
– color: specifies the color of the text
– size: specifies the size of the text
Font names and sizes (cont.)
• There are twelve (12) font size commands available: +6 through +1 and -1 through -6
– +6 is the largest (it's huge!!);
– -6 is the smallest (it's a little too small…)
• Faces are not supported by browsers in the same way and should be avoided
• Generally speaking, the <font> tag is deprecated: CSS must be used in place of it!
Font tag, an extended example
<!DOCTYPE html> <HTML> <HEAD> <TITLE>Font Tag </TITLE> </HEAD> <BODY bgcolor =“#FFFFFF”> Welcome to <font face="Calibri" size="1">Unicam</font><br/> Welcome to <font face="Monospace" size=«6" color="red"> Unicam </font><br/> Welcome to <font face="arial" size="2">Unicam</font><br/> </BODY> </HTML>
Aligning text
• Default alignment is left-justified
• To center text you surround the text you want centered with simple <CENTER> and </CENTER> commands
• To align text on the right, set the text aside as a separate paragraph using the <P> command plus an attribute:
• <P ALIGN="right">Text in the paragraph is pushed to the right</P>.
Special characters
• Certain characters have special meaning in HTML – E.g. < > delimit tags
• Such characters can be displayed in the page as simple “less than” or “greater than” characters but you have to take care that the characters are not interpreted as the special ones! – The < character can be specified as &It
– The > character can be specified as >
– The & character can be specified as &
Creating a link
<A href="URL">text displayed on the web page</A>
• Links to another page are a set of tag format – A stands for Anchor. It begins the link to another page – href stands for Hypertext REFerence. That says to the
browser, "This is where the link is going to go.“ – URL of the web site is the FULL ADDRESS of the link
Also notice that the address has an equal sign in front of it and is enclosed in quotes (it is an attribute)
– text displayed on the web page is where you write the text you want to appear on the page
Adding an e-mail link
<A href="mailto:e-mail">text displayed</A>
• Known as mailto command
• Follows the same coding scheme as a link: on click a piece of e-mail is sent to you
• same format as a link except you write "mailto:" in place of the “http://” and your e-mail address in place of the page address – still need the </A> tag at the end
– note there is NO SPACE between the colon and the e-mail address
Images
<IMG src="filename.gif“/> – IMG stands for "image" and tells the browser that an
image will go here on the page wherever you write in the image tag
– src stands for "source", an attribute that tells the browser where to go to find the image
– filename.gif is the name of the image, and this file name follows the same format as HTML docs: • name (of the image file) then a dot
• then there is a suffix (gif) or .jpg or .bmp
• Similarly to BR it is an empty tag (trailing slash)
Image info
• Place image files in the same directory as the page
– you can call for the image by name alone
• Otherwise adds directories and subdirectories to the SRC attribute to correctly link the picture
– some place all their images in an image directory; that can cut down on the confusion
• In general, be consistent on where you locate images or else the image won’t display!!
(Other) Image attributes
• width: this is used specify the desired width of the image (default, in pixels)
• height: this is used to specify the desired height of the image (default, in pixels) – It is a good practice to specify both the height and width. If set,
the space required for the image is reserved on page loading
• border: specifies the width of the border of the image. By default value is 0. i.e there is no border
• alt: displayed or used when the user is using a browser that does not display images (text only browsers or voice browsers); it follows the src attribute:
<IMG src="UpArrow.gif" alt="short description of the pic.">
Image file types
• three basic image formats on the Web and they have different suffixes – .gif This is generally pronounced "gif" (hard "G"), an
acronym for Graphics Interchange Format that browsers can handle quite easily
– .jpeg or .jpg (pronounced "j-peg") an acronym for Joint Photographic Experts Group, and this format uses compression after it's been created
– .bmp (pronounced "bimp") or a "bitmap". Internet Explorer browsers allow images as bitmaps (images a computer produces and places for you, such as a counter)
Clickable images
• An image where if you click on it you activate a hypertext link to another web page
• The format is:
• <A HREF="http://URL of the web page"><IMG SRC="filename.gif"></A>
• Places an image tag where normally there would be words
• entire image is “clickable,” or active
Lists of items
• The most common HTML lists are ordered and unordered lists:
• An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
• An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
An ordered list: 1.The first list item 2.The second list item 3.The third list item
An unordered list: •List item •List item •List item
Lists of items, an example
<!DOCTYPE html> <HTML> <HEAD> <TITLE>Font Tag </TITLE> </HEAD> <BODY> <P> We need to buy the following items <ul> <li>Coffee</li> <li>Milk</li> <li>The</li> <li>More coffee!!!</li> </ul> </P> </BODY> </HTML>
Tables
• Very useful for presentation of tabular information
• Useful to creative HTML authors who use the table tags to present their regular Web pages – tables can control page layout
• A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag)
• A border attribute can be added to show a border around cells
Table format
<TABLE border=“1”> <!-- start of table definition --> <CAPTION> caption contents </CAPTION> <!-- caption definition --> <TR> <!-- start of header row definition --> <TH> first header cell contents </TH> <TH> last header cell contents </TH> </TR> <!-- end of header row definition --> <TR> <!-- start of first row definition --> <TD> first row, first cell contents </TD> <TD> first row, last cell contents </TD> </TR> </TABLE> <!-- end of table definition -->
HTML Block Elements
• Most HTML elements are defined as block level elements or as inline elements.
• Block level elements normally start (and end) with a new line when displayed in a browser
– E.g.: <h1>, <p>, <ul>, <table>
• Inline elements are normally displayed without starting a new line
– E.g.: <b>, <td>, <a>, <img>
The div tag
• The HTML <div> element is a block level element that can be used as a container for grouping other HTML elements
• The <div> element has no special meaning. Since it is a block level element, the browser will display a line break before and after it
• When used together with CSS, the <div> element can be used to set style attributes to large blocks of content
• Another common use of the <div> element, is for document layout. The style attribute can be used to specify the inline style for an element
Final example
<!DOCTYPE html> <HTML> <HEAD> <TITLE>Your Title Here</TITLE> </HEAD> <BODY BGCOLOR="FFFFFF"> <CENTER><IMG SRC="yourimage.jpg" ALT="there is no image!!" ALIGN="BOTTOM"> </CENTER> <a href="http://somegreatsite.com">Link Name</a> is a link to another nifty site <H1>This is a Header</H1> <H2>This is a Medium Header</H2> Send me mail at <a href="mailto:[email protected]">[email protected]</a>. <P> This is a new paragraph!</P> <P> <B>This is a new paragraph!</B> <BR/> <B><I>This is a new sentence without a paragraph break, in bold italics.</I></B> </P> </BODY> </HTML>
Resource sites
• http://www.w3schools.com/tags/default.asp
– Contains a list of all the tags. It provides also a lot of examples to improve your knowledge of the language
• http://html-color-codes.info/
– Permits to generate the HEX number associated to the chosen color