WIXLIB

Introduction to theHyper Text markuplanguage (HTML)SE 101Spiros Mancoridis

What is HTML?HTML (Hyper Text Markup Language) is a languagefor specifying how text and graphics appear on aweb pageWhen you visit a web site (e.g., www.google.com)your web browser retrieves the HTML web page andrenders itThe HTML page is actually stored on the computerthat is hosting the web site and the page is sent toyour browserTo see what HTML looks like go to your web browserView menu and select View Source

HTMLHTML is a textual language that includesspecial markup tags such as: title Bob’s Diner /title The title . /title tag specifies a title forthe web pageHTML code is stored in a simple text file thathas either a .htm or a .html filename extension(e.g., restaurant.html)

How to author htmlUse a simple text editor such as vi to createsimple web documentsUse a web editor tool such as Amaya to createmore professional looking web documentshttp://www.w3.org/Amaya/Amaya is simple to use. Use the editor tools toauthor a document as you would using a texteditor such as Microsoft WordWhen you save the document it creates an .htmlfile

HTML titleA title is usually displayed on the top bar of aweb browser’s window when you visit a websiteThe title will now be displayed in the mainweb browser window, just on the top bar title Your title text goes here /title title is the start tag and /title is the endtag

HTML HeadingsHTML allows you to create sections in a document usingheadings, there are six levels of headingsthe first level creates the most significant heading, e.g., H1 This is a major section /H1 .and the sixth level creates the least significant heading, e.g., H6 This is a minor section /H6 After each heading you insert the text and images thatpertain to that section, like you would do in MS Word

HTML ParagraphsThe p tag is used to start a paragraphThe /p tag is used to end a paragraph p The text in between the two tags is yourparagraph . /p The /p tag is optional, HTML assumes thatyou are in the same paragraph until itencounters the next p tagYou can force a line break using the br tag

Formatting text i italics /i em also italics /em b bold /b i b italics and bold /b /i 2 sup 4 /sup 16H sub 2 /sub OThis text is del scratched /del out code use this tag for computer code /code

Pre formatting textText will always be formatted automatically unlessyou use the pre format pre . /pre tags to force adifferent formatVery useful when you want to display examples ofcode (I suggest using pre code . /code /pre for that purpose) pre This text will appearon the websiteexactly howI pre formatted it /pre

Inserting images img src ”dog.jpg” width ”120” height ”100”align ”left” The image source is in file dog.jpg and the widthand height attributes specify the dimensions of theimage on the web page in pixelsYou can also add a brief description of the image incase the user cannot see the image e.g., img src ”dog.jpg” width ”120” height ”100”alt ”My pet dog”

HTML listsUnordered ListsOrdered ListsDefinition Lists ul li Gold li Silver li Bronze /ul dl ol dt Gold li Gold dd For the best li Silver dt Silver li Bronze dd . second best /ol GoldSilverBronze1. Gold2. Silver3. Bronze /dl GoldFor the bestSilver. the second best

Lists can be nested too ul li A Students ol li John li Mary li Peter /ol li B Students ol li Paul li Cathy li Jill /ol /ul A Students1. John2. Mary3. PeterB Students1. Paul2. Cathy3. Jill

HTML Tables tablecellpadding ”2”cellspacing ”4”border ”1”bordercolor ”black”bgcolor rgb(0,255,0) tr th Column 1 /th th Column 2 /th /tr tr td (1,1) /td td (1,2) /td /tr tr td (2,1) /td td (2,2) /td /tr /table cellpadding determinesthe space between the cellborders and the textcellspacing determines thewidth of the borderbgcolor defines the table’sbackground colorThe table rows are definedone after the other; somerows can be headers andothers data

Linking to other pages a href ”http://www.cs.drexel.edu/ spiros“ Spiros’ Page /a This links to a page on the World Wide Web (WWW) a href ”courses.html“ Spiros’ Courses /a This links to a page called courses.html in the same directory asthe html file a href ”./music.html“ Spiros’ Music /a This links to a page called music.html in the directory above thedirectory of the html file a href ”hobbies/soccer.html“ Spiros’ Music /a This links to a page called soccer.html in the hobbies sub-directory

Linking to Anotherpart of the same pageFirst define a link target header (anchor): h2 a name ”soccer-scores” Soccer Scores /a /h2 Or you can avoid the use of a h2 id ”soccer-scores” Soccer Scores /h2 Then reference the link target: a href ”#soccer-scores” Go to Soccer Scores /a Or you can reference the link target from a remote web site: a href ”http://www.soccer.com/#soccer-scores” Go toSoccer Scores /a

Linking to anemail address a href ”spiros@drexel.edu” Send Spiros a message /a Caution: Web crawlers will find this e-mailaddress and I might start to get more spammessages!Better idea to use an image with the emailaddress

Linking an image to aWeb pageBy clicking on the image (e.g., Drexel logo ofMario the Dragon) you can link to the DrexelUniversity homepage a href ”http://www.drexel.edu” img src ”mario.gif” alt ”Drexel home page”align ”right” /a

HTML Sound FilesYou can link sound files to your web pages: a href ”http://ww.cs.drexel.edu/ spiros/music/mysong1.m3u”type ”audio/x-mpegurl” listen to my song from an m3u /a a href ”http://ww.cs.drexel.edu/ spiros/music/mysong2.mp3”type ”audio/mpeg” listen to my song as from an mp3 /a

Cascading style SheetsYou can use cascading style sheets (CSS) tocustomize your html filee.g., specify colors, fonts, bold, italics for theentire documentStyle rules are defined using the tags style . /style

Example CSS style d.jpeg');background-position : 50% 50% ;background-size : 100% ;background-origin : content ;background-repeat: no-repeat ;font-family: “Times New Roman”color: blue} /style

Putting it all together !-- This is an optional comment -- html head title Your title goes here /title style Your style sheet goes here /style /head body Your content goes here . Paragraphs, images,lists, links, texts, headings, etc. /body /html

Create your PersonalWebpageNow that you know the HTML basics you cancreate a personal web page on tux.cs.drexel.eduCreate the directory public html under yourhome directory:/home/userid/public htmlDeposit the web page index.html with yourpersonal homepage into the public html directoryTo access your page go to:http://www.cs.drexel.edu/ userid

Advancing yourhtml skillsThere are many on line resources to help youadvance your knowledge of ks-Download.html

You can use cascading style sheets (CSS) to customize your html file e.g., specify colors, fonts, bold, italics for the entire document Style rules are defined using the tags style . /style Example CSS style body eg'); background-position : 50% 50% ; background-size : 100% ; background-origin : content ; background-repeat: no-repeat .