Introduction to HTML

Web Programming and DesignWeb Programming and DesignIntroduction to HTMLIntroduction to HTML

http://ce.qu.edu.az/~aadamov

Dr. Abzetdin ADAMOVDr. Abzetdin ADAMOV

Chair of Computer Engineering DepartmentChair of Computer Engineering [email protected] [email protected]

What you need to haveWhat you need to have

• Running computerRunning computer• Text editorText editor

NotePadNotePad EmEditorEmEditor

• Web BrowserWeb Browser ChromeChrome Internet ExplorerInternet Explorer FirefoxFirefox SafariSafari

• Somewhere to save your workSomewhere to save your work Note: You don’t have to work online!Note: You don’t have to work online!

How to use the materialsHow to use the materials

• Open text editorOpen text editor• Type/Edit your HTMLType/Edit your HTML• Hit ‘File Hit ‘File → → Save As’Save As’• Change ‘Save as Type’ optionChange ‘Save as Type’ option

Make it read ‘Save as Type: All files’Make it read ‘Save as Type: All files’

• If that is not an option, put the name in quotesIf that is not an option, put the name in quotes• Save our test page as “test.html”Save our test page as “test.html”• Point web browser to the file locationPoint web browser to the file location

Type something similar to D:/CODES/HTML/test.html Type something similar to D:/CODES/HTML/test.html in the browser barin the browser bar

TagsTags

• Tags tell a browser (Chrome, Internet Tags tell a browser (Chrome, Internet Explorer, Firefox, ect) how to interpret them Explorer, Firefox, ect) how to interpret them and arrange informationand arrange information

• Tags start with ‘<‘ and end with ‘>’Tags start with ‘<‘ and end with ‘>’• Normally tags come in pairs, and the closing Normally tags come in pairs, and the closing

tag starts with ‘</’tag starts with ‘</’• ExamplesExamples

<b>This is bold</b> and this is<b>This is bold</b> and this is <u>Underlined!</u><u>Underlined!</u>

TagsTags Basically, a computer sees an "A" as simply an "A" - Basically, a computer sees an "A" as simply an "A" -

whether it is bold, italic, big or small. whether it is bold, italic, big or small. To tell the browser that an "A" should be bold we need to To tell the browser that an "A" should be bold we need to

put a markup in front of the A. Such a markup is called a put a markup in front of the A. Such a markup is called a Tag.Tag.

All HTML tags are enclosed in < and >.All HTML tags are enclosed in < and >.

Example: Example:

A piece of text as it appears on the screen:A piece of text as it appears on the screen:This is an example of This is an example of boldbold text. text.

HTML: the HTML for the above example:HTML: the HTML for the above example:

This is an example of <b>bold</b> text.This is an example of <b>bold</b> text.

Basic StructureBasic Structure

<html><html><head><head>

<title><title>Title of your page here!Title of your page here!

</title></title> Metatags…Metatags… JavaScript…JavaScript… CSS…CSS…

</head></head><body><body>

Content goes here!Content goes here!

</body></body>

</html></html>

HEAD SECTIONHEAD SECTION The head section of the webpage includes all the stuff that does not The head section of the webpage includes all the stuff that does not

show directly on the resulting page.show directly on the resulting page.

The <title> and </title> tags encapsulate the title of your page. The title The <title> and </title> tags encapsulate the title of your page. The title is what shows in the top of your browser window when the page is is what shows in the top of your browser window when the page is loaded. loaded.

Another thing you will often see in the head section is metatags. Another thing you will often see in the head section is metatags. Metatags are used for, among other things, to improve the rankings in Metatags are used for, among other things, to improve the rankings in search engines.search engines.

Quite often the head section contains javascript which is a programming Quite often the head section contains javascript which is a programming language for more complex HTML pages.language for more complex HTML pages.

Finally, more and more pages contain codes for cascading style sheets Finally, more and more pages contain codes for cascading style sheets (CSS). CSS is a rather new technique for optimizing the layout of major (CSS). CSS is a rather new technique for optimizing the layout of major websites. websites.

BODY SECTIONBODY SECTIONThe body of the document contains all that can be seen when the user The body of the document contains all that can be seen when the user loads the page.loads the page.

Text (Formatting, Resizing, Layout, Listing)Text (Formatting, Resizing, Layout, Listing) Links (local pages, pages at other sites, bookmarks)Links (local pages, pages at other sites, bookmarks) Images (Inserting images, adding a link to an image)Images (Inserting images, adding a link to an image) Backgrounds (colors, images, fixed image)Backgrounds (colors, images, fixed image) TablesTables FramesFrames FormsForms Hexadecimal ColorsHexadecimal Colors

First tagsFirst tags

• <b> and </b><b> and </b>• boldsbolds

• <i> and </i><i> and </i>• italicizesitalicizes

• <u> and </u><u> and </u>• underlinesunderlines

• <center> and </center><center> and </center>• Puts in the center of the page, or ‘aligns Puts in the center of the page, or ‘aligns

center’center’

First tagsFirst tags

• <strong> and </strong><strong> and </strong>• <big> and </big><big> and </big>• <em> and </em><em> and </em>• <small> and </small><small> and </small>• <del> and </del><del> and </del>• <strike> and </strike><strike> and </strike>• <pre> and </pre><pre> and </pre>• <code> and </code><code> and </code>• <blockquote> and </blockquote><blockquote> and </blockquote>

More basicsMore basics

<h1> and </h1><h1> and </h1> Headers preset to help define sectionsHeaders preset to help define sections Six different choices down to <h6> and </h6>Six different choices down to <h6> and </h6>

The <br /> and <nobr> tagsThe <br /> and <nobr> tags Causes a line breakCauses a line break Difference between <b>this is bold</b> and <b> This is Difference between <b>this is bold</b> and <b> This is

bold <br /> and there is a line break</b>bold <br /> and there is a line break</b> Why is there not a </br>?Why is there not a </br>? <nobr> tag is used to instruct the browser not to break <nobr> tag is used to instruct the browser not to break

into new line the specified text into new line the specified text <p> and </p><p> and </p>

Paragraph tagParagraph tag

The 16 Basic Color NamesThe 16 Basic Color Names

Extended Color NamesExtended Color Names

Color Names, RGB, Color Names, RGB, HexadecimalHexadecimal

Some useful StuffSome useful Stuff

• <pre> and </pre> - preformatted<pre> and </pre> - preformatted

• <sub> and </sub> - sub script<sub> and </sub> - sub script

• <sup> and </sup> - superscript<sup> and </sup> - superscript

• How to put in symbolsHow to put in symbols and others and others http://www.w3schools.com/tags/http://www.w3schools.com/tags/

ref_entities.asp ref_entities.asp

CommentsComments

• Start with Start with 

• Comments are special tagsComments are special tags

• You can type whatever you want in the You can type whatever you want in the middlemiddle

• ExampleExample page starts -->

The <hr /> tagThe <hr /> tag

Horizontal ruleHorizontal rule Use these sparingly!!Use these sparingly!! AttributesAttributes

WidthWidth AlignAlign SizeSize

Default of 2 (pixels tall)Default of 2 (pixels tall) NoshadeNoshade

True or falseTrue or false ColorColor

The <hr /> tagThe <hr /> tag

Horizontal ruleHorizontal rule Use these sparingly!!Use these sparingly!! AttributesAttributes

WidthWidth AlignAlign SizeSize

Default of 2 (pixels tall)Default of 2 (pixels tall) NoshadeNoshade

True or falseTrue or false ColorColor

ListsLists

<ul> and </ul> stand for un-ordered list<ul> and </ul> stand for un-ordered list Aka this is a list with bulletsAka this is a list with bullets

<ol> and </ol> stand for ordered lists<ol> and </ol> stand for ordered lists1. First Item1. First Item2. Second2. Second3. Ect3. Ect

<li> and </li> stand for list item<li> and </li> stand for list item These are used inside the <ul></ul> and These are used inside the <ul></ul> and

<ol></ol> tags<ol></ol> tags

Unordered ListsUnordered Lists

<ul> and </ul> stand for ordered list<ul> and </ul> stand for ordered list ““typetype” property specifies the leading symbol in ” property specifies the leading symbol in

front of each list item, possible values: circle, front of each list item, possible values: circle, disk, squaredisk, square

Example:Example:<ul type=“squeare”><ul type=“squeare”>

OneOne TwoTwo ThreeThree

Ordered ListsOrdered Lists <ol> and </ol> stand for ordered list<ol> and </ol> stand for ordered list

““typetype” property specifies the leading symbol in ” property specifies the leading symbol in front of each list item, possible values: 1, i, I, a, Afront of each list item, possible values: 1, i, I, a, A

““startstart” property specifies the starting value” property specifies the starting value ““valuevalue” property lets to interrupt standard ” property lets to interrupt standard

sequence sequence

Example:Example:<ul type=“A”><ul type=“A”>

A.A. OneOneB.B. TwoTwoC.C. ThreeThree

Lists, ExamplesLists, Examples

<ul><ul> <li>This is the first item</li><li>This is the first item</li> <li>This is the second</li><li>This is the second</li> <li><ol><li><ol>

<li>This item will be numbered</li><li>This item will be numbered</li> <li>So will this one!</li><li>So will this one!</li>

</ol></li></ol></li> <li>the last un-ordered item</li><li>the last un-ordered item</li>

</ul></ul>Note how the tags match up, a starting tag Note how the tags match up, a starting tag

always has a closing tagalways has a closing tag

Adding imagesAdding images

<img src=‘where is the image’ /><img src=‘where is the image’ /> Why is there no </img> ?Why is there no </img> ? What else can I do?What else can I do?

Align the image (center it, ect)Align the image (center it, ect) Resize the image (height and width)Resize the image (height and width) Use alt and titleUse alt and title

What is the difference?What is the difference?Alt is alternative textAlt is alternative textTitle is the title of the imageTitle is the title of the image

Add a borderAdd a border Define horizontal and vertical spacesDefine horizontal and vertical spaces Use image as a link or background imageUse image as a link or background image

Image PropertiesImage Properties

src src – source of image file (path/name)– source of image file (path/name) align align – image position related to other objects (left, right, – image position related to other objects (left, right,

top, bottom, middle, …)top, bottom, middle, …) alt alt – alternative text will be shown in the case if image – alternative text will be shown in the case if image

can’t be displayedcan’t be displayed titletitle – descriptive text for the image – descriptive text for the image border border – define thickness of frame along the perimeter – define thickness of frame along the perimeter

of image of image vspace vspace – define the vertical space between image and – define the vertical space between image and

other objectsother objects hspace hspace – define the horizontal space between image – define the horizontal space between image

and other objectsand other objects

Links!Links!

<a href=‘http://www.google.com’> Go to Google! <a href=‘http://www.google.com’> Go to Google! </a></a>

Hypertext referenceHypertext reference What else can you do?What else can you do?

Make an image a linkMake an image a link Link to different places in your own pageLink to different places in your own page

Uses ‘anchors’Uses ‘anchors’

Relative versus Absolute linksRelative versus Absolute links Absolute is normally the way to go when you are Absolute is normally the way to go when you are

starting out!starting out!

Links LevelsLinks Levels

To different domain / machine To different domain / machine <a <a hrefhref=“http://ce.qu.edu.az/intro/go.html”>...</a>=“http://ce.qu.edu.az/intro/go.html”>...</a>

To same domain and different directoryTo same domain and different directory<a href=“docs/page2.html”>...</a><a href=“docs/page2.html”>...</a>

Link to file in same directoryLink to file in same directory<a href=“about.html”>...</a><a href=“about.html”>...</a>

Internal Link or AnchorInternal Link or Anchor<a <a hrefhref=“#chapter1”>...</a>=“#chapter1”>...</a>

<a <a namename=“chapter1”>...</a>=“chapter1”>...</a>

Link’s PropertiesLink’s Properties

targettarget – specifies the target window where linked – specifies the target window where linked document will be opened. Possible values: _blank, document will be opened. Possible values: _blank, _parent, _self, _top (default value is _self)_parent, _self, _top (default value is _self)

titletitle – specifies descriptive information about a – specifies descriptive information about a link. This text appears when the mouse pointer link. This text appears when the mouse pointer hovers on the link. This property is in term of SEO hovers on the link. This property is in term of SEO Example:Example:

<a <a hrefhref=“http://www.qu.edu.az” =“http://www.qu.edu.az” targettarget=“_blank” =“_blank” titletitle=“Qafqaz University Website”>=“Qafqaz University Website”>

The email linkThe email link

Add mailto:[email protected] mailto:[email protected]

<a href=‘mailto:[email protected]’>Email John! </a><a href=‘mailto:[email protected]’>Email John! </a>Add a subjectAdd a subject

Add ‘?subject=your subj here’ to the endAdd ‘?subject=your subj here’ to the end <a href=‘mailto:[email protected]?subject=this is an <a href=‘mailto:[email protected]?subject=this is an

email from your website, john_at_bellsouth.com’> email from your website, john_at_bellsouth.com’> Email John! </a>Email John! </a>

You can add cc and bcc fields tooYou can add cc and bcc fields too After the subject, use ‘&[email protected]’ After the subject, use ‘&[email protected]’

or add ‘&[email protected]’ or bothor add ‘&[email protected]’ or both

The BODY tagThe BODY tag

AttributesAttributes BgcolorBgcolor TextText LinkLink

AlinkAlink VlinkVlink

BackgroundBackground

The BODY propertiesThe BODY properties

bgcolorbgcolor – defines the background color of – defines the background color of webpagewebpage

texttext – defines the default color of text – defines the default color of text linklink – specifies the default color of all links – specifies the default color of all links alinkalink – specifies color of active link (a link – specifies color of active link (a link

become active once user clicks on it)become active once user clicks on it) vlinkvlink – specifies color of visited links – specifies color of visited links

META tagsMETA tags

META tags help search engines find your pageMETA tags help search engines find your pageBetween <head> and </head>Between <head> and </head>ExamplesExamples

<meta name=‘keywords’ <meta name=‘keywords’ content=‘cool,page,first,HTML,attempt’>content=‘cool,page,first,HTML,attempt’>

<meta name=‘description’ content=‘my first try at making a <meta name=‘description’ content=‘my first try at making a web page with HTML, come check it out’>web page with HTML, come check it out’>

<meta name="robots" content="index, follow"><meta name="robots" content="index, follow">

What is purpose <META HTTP-EQUIV="refresh" What is purpose <META HTTP-EQUIV="refresh" content="2;URL=http://www.yoursite.com/newpage.content="2;URL=http://www.yoursite.com/newpage.htm"> htm">

META tags examplesMETA tags examples

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" ><meta http-equiv="Content-Type" content="text/html; charset=utf-8" > <meta name="description" content="Free Web tutorials"><meta name="description" content="Free Web tutorials"> <meta name="keywords" <meta name="keywords"

content="HTML,DHTML,CSS,JavaScript,Web Design">content="HTML,DHTML,CSS,JavaScript,Web Design"> <meta name="author" content="Abzetdin Adamov"><meta name="author" content="Abzetdin Adamov"> <meta name="copyright" content="A.Adamov 2012"><meta name="copyright" content="A.Adamov 2012"> <meta http-equiv="location" content="http://my.qu.edu.az"><meta http-equiv="location" content="http://my.qu.edu.az"> <meta http-equiv="refresh" content=“5"><meta http-equiv="refresh" content=“5"> <meta http-equiv="refresh" content="2; URL=http://ieee.qu.edu.az"><meta http-equiv="refresh" content="2; URL=http://ieee.qu.edu.az"> <meta name="robots" content="index, follow"> <meta name="robots" content="index, follow"> <meta name="robots" content=“noindex, nofollow"> <meta name="robots" content=“noindex, nofollow"> <meta name=“googlebot" content=" noindex"><meta name=“googlebot" content=" noindex">

TablesTables

• Tables are created out three main parts, or Tables are created out three main parts, or tagstags

• The <table> and </table> tag tells the The <table> and </table> tag tells the browser that you are creating a tablebrowser that you are creating a table

• The table row tags (<tr> and </tr>) create The table row tags (<tr> and </tr>) create a single rowa single row

• The table division tags (<td> and </td>) The table division tags (<td> and </td>) create a single cell within a rowcreate a single cell within a row

Table, basic exampleTable, basic example

• <table><table> <tr><tr>

<td>This is the top left cell</td><td>This is the top left cell</td>

<td>This is the top row, right cell</td><td>This is the top row, right cell</td> </tr></tr> <tr><tr>

<td>This is the bottom row, left cell</td><td>This is the bottom row, left cell</td>

<td>this is the bottom row, right cell</td><td>this is the bottom row, right cell</td> </tr></tr>

• </table></table>This is the top left This is the top left cellcell

This is the top row, This is the top row, right cellright cell

This is the bottom This is the bottom row, left cellrow, left cell

This is the bottom This is the bottom row, right cellrow, right cell

So why the <table> ?So why the <table> ?• The <table> tag allows us to give attributes to The <table> tag allows us to give attributes to

the table as a wholethe table as a whole• BorderBorder• Cell SpacingCell Spacing

The space in between one cell and anotherThe space in between one cell and another

• Cell PaddingCell Padding The space in between the edge of one cell and the The space in between the edge of one cell and the

actual content in that cell (normally text)actual content in that cell (normally text)

• BgcolorBgcolor• BackgroundBackground

The TABLE’s propertiesThe TABLE’s properties• widthwidth – specifies width of table in pixels or % – specifies width of table in pixels or %• heightheight – specifies height … – specifies height … • alignalign – alignment of table (left, right, center) – alignment of table (left, right, center)• borderborder – specifies the visibility of table’s borders – specifies the visibility of table’s borders• bgcolorbgcolor – defines background color of table – defines background color of table• backgroundbackground – defines background image of table – defines background image of table• bordercolorbordercolor – specifies the color of borders – specifies the color of borders• cellspacing cellspacing – sets the space between cells– sets the space between cells• cellpaddingcellpadding – sets the space between data and cell’s borders – sets the space between data and cell’s borders• bordercolorlightbordercolorlight – creates a 3D lighting effect – creates a 3D lighting effect • bordercolordarkbordercolordark – creates a 3D lighting effect – creates a 3D lighting effect

ReviewReview

Tags are the main parts of htmlTags are the main parts of html Tags can be changed with attribute valuesTags can be changed with attribute values <font color=“red”>hello</font><font color=“red”>hello</font>

<font> is the opening tag<font> is the opening tag Color is an attribute of the font tagColor is an attribute of the font tag </font> is the closing tag</font> is the closing tag

Most tags apply to a section of code, and need a Most tags apply to a section of code, and need a closing/ending tagclosing/ending tag

Some tags, like <br /> and <img /> do notSome tags, like <br /> and <img /> do not The correct way to ‘close’ these tags is the /> endingThe correct way to ‘close’ these tags is the /> ending Most of the time they will work without itMost of the time they will work without it 99% of the time, <br /> and <br> will do the same thing99% of the time, <br /> and <br> will do the same thing

Adding soundsAdding sounds

Link to the fileLink to the fileUse the <embed /> tagUse the <embed /> tag

SrcSrc Width, heightWidth, height

Good values are 144 width and 60 heightGood values are 144 width and 60 height AutostartAutostart

True or falseTrue or false LoopLoop

True or falseTrue or false HiddenHidden

True or falseTrue or false

Tags we knowTags we know<html><html> <center> <big> <center> <big>

<small> <strong> <small> <strong> <strike><strike>

<font> <font> <basefont><basefont>

<title><title>

<meta><meta>

<head><head> <h1>,<h2>,<h3><h1>,<h2>,<h3>….<h6>….<h6>

<img><img> <hr>,<ul>,<hr>,<ul>,

<ol>,<li><ol>,<li>

<body><body> <br> <p> <br> <p> <blockquote> <blockquote> <q><q>

<pre>,<sub>, <pre>,<sub>, <sup> <code><sup> <code>

<table><table>

<b> <u> <b> <u> <i> <s><i> <s>

<a><a> <embed><embed> <td>, <td>, <tr>,<td><tr>,<td>

Lets build a simple siteLets build a simple site

If you haven’t already, create a folder to store If you haven’t already, create a folder to store your HTMLyour HTML I Recommend C:/HTML for now, its easy to rememberI Recommend C:/HTML for now, its easy to remember

Freely create three different pagesFreely create three different pages Remember the basic HTML structureRemember the basic HTML structure Don’t fret, I will walk you through all of this, so if Don’t fret, I will walk you through all of this, so if

you don’t know where to start its okyou don’t know where to start its ok You will make mistakes, that’s ok too. Its part of You will make mistakes, that’s ok too. Its part of

learninglearning

Final notesFinal notes

Good places to learn moreGood places to learn more http://www.w3schools.com/html/http://www.w3schools.com/html/ http://www.davesite.com/webstation/html/ http://www.davesite.com/webstation/html/

Don’t try to memorize every HTML tag you Don’t try to memorize every HTML tag you seesee All you need to know is what is possibleAll you need to know is what is possible You can look up the specific tagYou can look up the specific tag Aka, I would search ‘how do you create a Aka, I would search ‘how do you create a

table in HTML’ to find the specific tagstable in HTML’ to find the specific tags

Want to know moreWant to know more

A common way to layout the content on your A common way to layout the content on your page is to make a large tablepage is to make a large table Check out http://www.w3schools.com/html/tryit.asp?Check out http://www.w3schools.com/html/tryit.asp?

filename=tryhtml_layoutfilename=tryhtml_layoutYou might see the word ‘deprecated’ a lot when You might see the word ‘deprecated’ a lot when

learninglearning This means there is a ‘newer’ way to do the same This means there is a ‘newer’ way to do the same

thingthing This happens for a lot of reasons (simpler code, This happens for a lot of reasons (simpler code,

makes more sense, ect)makes more sense, ect) Normally the old way will still work, so don’t stress to Normally the old way will still work, so don’t stress to

much, its not the end of your site and you don’t have much, its not the end of your site and you don’t have to ‘update’to ‘update’

So what’s next?So what’s next?

Style SheetsStyle Sheets Why???Why???

See See http://www.w3schools.com/html/html_whyusehthttp://www.w3schools.com/html/html_whyusehtml4.asp ml4.asp

““The original HTML was The original HTML was never intendednever intended to to contain tags for contain tags for formattingformatting a document…In a document…In HTML 4.0 HTML 4.0 all formatting can be removedall formatting can be removed from from the HTML document and stored in a separate the HTML document and stored in a separate style sheet.”style sheet.”

Hence, next weeks lesson is on CSS, or Hence, next weeks lesson is on CSS, or Cascading Style SheetsCascading Style Sheets

QUESTIONSQUESTIONS

http://ce.qu.edu.az/~aadamov

Date post:	04-Jun-2015
Category:	Education
Upload:	abzetdin-adamov
View:	527 times
Download:	1 times

Introduction to HTML

Education