Hyper Text Markup Language HTML: ATutorial

Ahmed Othman Eltahawey ∗

December 21, 2016

The World Wide Web (WWW) is an information space where documents andother web resources are located. Web is identified by URLs ( the address that youwrite in the top of the web browser) and can be accessed via the Internet [5].

The web may include a lot of component such as:

• Text

• Image

• Videos

• Controls such as buttons, draggable items, etc

• Hyperlinks: interlinked by hypertext links which, when clicked direct youto another location

The web was Invented by the English scientist Tim Berners-Lee in 1989. Hewrote the first web browser in 1990. The creation of a web site includes twomain operations: Web designing and web development. Web designing is theprocess of designing the layout of the website. It answers the question of how thewebsite looks like. The locations, the fonts, the colors and the sizes of the differentelements are determined. There are different programming languages that are usedin designing websites. The most popular languages are HTML (hypertext markuplanguage), CSS. PHP and JavaScript are programming languages geared towardfunctionality but can also be used to control the behavior and the look and feelof a website. Web development addresses the actions performed by the webpage,whether this action is executed automatically by the web browser upon page load

∗Ahmed Othman is an assistant professor at the Information System department, Facultyof Computers & Informatics, Suez Canal University, Ismailia, Egypt, e-mail: ahmedelta-hawey@gmail.com

1

Figure 1: HTML page structure

or in response to a specific event or user action. For example, when a hyperlink isclicked. Web development is performed by a specialist programmer [6]. Python,PHP or HTML are among the languages used in developing a website. In thissection, we will give a short introduction to HTML.

1 HTMLA markup language is a set of markup tags described by HTML tags. Each HTMLtag describes different document content. HTML tags are the hidden keywordswithin a web page. It defines how the browser must format and display the content.Most tags must have two parts, an opening and a closing part: < tagname >content < /tagname > HTML tags normally come in pairs like < p > and< /p > The first tag in a pair is the start tag while the second tag is the end tag.The end tag is written like the start tag, but with a slash before the tag name [7].The web page is divided into two main parts Figure 1:

• The head part: Includes the title of the page and what appears on the head.

• The body: Includes all the elements that should be appear on the webpage.The body area is displayed in the browser.

My first HTML page Figure 2 shows a small HTML code for a simple page. Thecode may be explained as follows:

• The DOCTYPE declaration defines the document type to be HTML

• The text between < html > and < /html > describes an HTML document

2

• The text between < head > and < /head > provides information aboutthe document

• The text between < title > and < /title > provides a title for the document

• The text between < body > and < /body > describes the visible pagecontent

• The text between < h1 > and < /h1 > describes a heading

• The text between < p > and < /p > describes a paragraph

Figure 2: HTML code example

The code at Figure 2 may be written in any editor such as notepad or wordpad.The document should be saved as .html and then opened from any web browsersuch as Internet Explorer, Google Chrome or Firefox. Figure 3 shows the resultsof applying the previous code.

2 HTML HeadingsHTML headings are defined with the < h1 > to < h6 > tags with differentsizes starting with the largest size at < h1 > and ending with the smallest size at< h6 >. If we have the following portion of code, then the result will appear atFigure 4.

3

Figure 3: The webpage created after execturting Fig. 2 code

<h1>L a r g e s t s i z e head ing </h1><h2>S m a l l e r s i z e head ing </h2><h3>S m a l l e r s i z e head ing </h3><h4>L a r g e s t s i z e head ing </h4><h5>S m a l l e r s i z e head ing </h5><h6>S m a l l e s t s i z e head ing </h6>

Figure 4: The headeing results

3 HTML ParagraphsHTML paragraphs are defined with the < p > text < /p > tags. The spacesand the new lines are ignored. If you want to force for a new line you shouldwrite < br >. If you want to have a paragraph with the same formatting like you

4

write, write what you want between < pre > < /pre > tags. The results of thefollowing code could be shown at Figure 5.

<p>Thi s p a r a g r a p h i g n o r e s p a c i n g and new l i n e s </p><p>Thi s i s a n o t h e r p a r a g r a p h . <br> h e r e s t a r t new l i n e </p><pre> Here i t a p p e a r wi th t h e same f o r m a t t i n g </ pre>

Figure 5: The paragraph styles

There are a lot of options that could be used for text formatting such as:

• < b > bold < /b >: write in bold style

• < I > italic < /I >: write in italic style

• < u > underline < /u >: put underline

• < hr > Horizontal line: draw a horizontal line

If we reused the previous code with the new formatting, the results of thefollowing code will appear at Figure 6.

<p>Thi s p a r a g r a p h i g n o r e <b> s p a c i n g </b> and new l i n e s </p><p>Thi s i s a n o t h e r p a r a g r a p h . <br> <I>h e r e s t a r t new l i n e </ I> </p><pre> <u>Here i t a p p e a r wi th </u> t h e same f o r m a t t i n g </ pre><hr>

4 HTML linksLinks are a text that when clicked will open another page or do certain action. Tomake a hyperlink, you have to specify:

• The text that will appear on the screen

5

Figure 6: The formatting results

• The page that will be opened when the text is clicked.

The HTML tag < a >< /a > is used to specify the HTML code for the hyperlinkas follows:

<a h r e f =” u r l ”> l i n k t e x t </a>

The previous code can be dissected as follows:

• href=”url: here you specify the webpage or HTML page that should beopened when the text is clicked

• link text: the text that will appear on the webpage and that when clicked theurl will open.

For example, the following code is used to open Google web page when the textopenGoogle is clicked.

<a h r e f =” g oo g l e . com”> Open goo g l e </a>

5 HTML ImagesHTML allows you to put an image inside your webpage. You have to specifythe path of the image that should appear as well as an alternative text that mightappear if the image is not found. The HTML tag for image is written as follows:

<img s r c =” u r l ” a l t = s o m e t e x t ”>

The previous code can be dissected as follows:

• ¡img is the HTML tag for putting an image inside the webpage.

• src = ”url”: Specify the url ( the path) of the image that should appear

6

• alt=”some text”: will appear if HTML failed to show the image for anyreason.

If we want to put an image called flower.jpg located at the same folder with thewebpage, the following code should be written:

<img s r c =” f l o w e r . j p g ” a l t = F l o w e r p i c t u r e ”>

The flower picture will appear on the webpage, if not the word Flower picture willappear instead.

5.1 Images as linksImages can be used instead of text as hyperlink. The same < a > tag is used butthe image tag is inserted instead of the link text. The HTML tag to use image ashyperlink is as follows:

<a h r e f =” u r l ”><img s r c =” u r l ” a l t = s o m e t e x t ”></a>

Now, we want to make the flower image a link that when clicked the Googlewebsite is opened. The following code can be used to open Google website usingthe flower image:

<a h r e f =” g oo g l e . com”><img s r c =” f l o w e r . j p g ”a l t = F l o w e r p i c t u r e ”></a>

6 HTML TablesThe tables could be created in HTML using the tag < table >< /table > asfollows:

• Start with < table > and end with < /table >

• < tr >< /tr > for each row:

• < th > text < /th > : the header of the columns

• < td >< /td > for table data (column)

• < caption > Monthly savings < /caption > to define th etitle of the table

The following HTML code is used to create two rows two columns table with datainserted in it.

7

< t a b l e s t y l e =” wid th :100%”>< t r ><th> Header 1</ th><th> Header 2</ th></ t r >

< t r ><td>Data 1</ td><td>Data 2</ td>

</ t r >< t r >

<td>Data 1</ td><td>Data 2</ td>

</ t r ></ t a b l e >

The results of executing the previous code is shown in figure 7. The table has noborders and enlraged on the whole page as we used width =100%. If you want to

Figure 7: The table using HTML

make borders around each row and column, you can use the following code:

< t a b l e b o r d e r =”3” s t y l e =” wid th :100%”>< t r ><th> Name</ th><th> Grades </ th></ t r >

< t r ><td>Ahmed</ td>

<td >50</ td></ t r >< t r >

<td>Mohamed</ td><td >60</ td>

</ t r ></ t a b l e >

And the result of the previous code is shown in figure 8. Here, the border thicknessis specified at the header of the table (border=”3”) and the width of the table is

8

specified as 100%. There are a lot of options at the designing of the tables. Forexample, if you want to expand the row or the column you can use:

• colspan = 2: to expand the column into two column. Expand the columninto two cells

• rowspan = 2: To expand this row into two rows.

Figure 8: The table with border using HTML

Therefore, the result of the following code is shown at figure 10

< t a b l e b o r d e r =”1” s t y l e =” wid th :100%”>< t r >< t h > Name</ th>< t h c o l s p a n =2> Grades </ th></ t r >

< t r ><td>Ahmed</ td>

<td >50</ td><td >40</ td>

</ t r >< t r >

<td>Mohamed</ td><td >60</ td>

<td >80</ td></ t r >

</ t a b l e >

Here, the grade column is expanded into two columns and the thickness of theborder is reduced to 1 10

Figure 9: The table with column expanded

9

7 HTML ListsHTML can generate either ordered or unordered list.

7.1 Unordered listThe unordered list is generated using the< ul >< /ul > tags. Moreover, eachitem in the unordered list is generated using the < li >< /li > tag. The followingcode is used to generate 3 items unordered list. The result of the code is shown at10

Three i t e m s u n o r d e r e d l i s t :<ul>

< l i >Coffee </ l i >< l i >Tea</ l i >< l i >Milk </ l i >

</ u l>

Figure 10: Unordered list

The type of the item symbol could be specified at the header of the list. Theunordered list has four different types of the item symbol 1. The following code

Style Descriptionlist-style-type:disc: The list items will be marked with bullets (default)list-style-type:circle The list items will be marked with circleslist-style-type:square The list items will be marked with squareslist-style-type:none The list items will not be marked

Table 1: The list marks table.

use the square symbol instead of the default bullet at the previous code.

10

Three i t e m s u n o r d e r e d l i s t w i th r e c t a n g l e symbol :<u l s t y l e = l i s t −s t y l e−t y p e : squa re>

< l i >Coffee </ l i >< l i >Tea</ l i >< l i >Milk </ l i >

</ u l>

The result of the code is presented at Figure 11

Figure 11: Unordered list with square symbol

7.2 Ordered listThe unordered list is generated using the< ol >< /ol > tags. Moreover, eachitem in the unordered list is generated using the < li >< /li > tag. The followingcode is used to generate 3 items ordered list. The result of the code is shown atFigure 12.

Three i t e m s o r d e r e d l i s t :<ol>

< l i >Coffee </ l i >< l i >Tea</ l i >< l i >Milk </ l i >

</ o l>

The type of the item numbering could be specified at the header of the list.The ordered list has five different types of the item symbol 2. The following codeuse the I numbering instead of the default numbering at the previous code.

Three i t e m s u n o r d e r e d l i s t w i th r e c t a n g l e symbol :<o l t y p e =” I ”>

< l i >Coffee </ l i >< l i >Tea</ l i >< l i >Milk </ l i >

</ o l>

11

Figure 12: ordered list

Style Descriptiontype=”1” Numbered with numbers (default)type=”A” Numbered with uppercase letterstype=”a” Numbered with lowercase letterstype=”I” Numbered with uppercase roman numberstype=”i” Numbered with lowercase roman numbers

Table 2: The list marks table.

The result of the code is presented at Figure 13

Figure 13: ordered list with I symbol

7.3 Description listA description list is a list of terms, with a description of each term. < dl > tagdefines the description list, < dt > tag defines the term (name), and < dd > tagdescribes each term The following code use the description list to describe eachitem and the result of executing the code is shown at Figure 14.

<dl>

12

<dt>Coffee </ d t><dd> b l a c k h o t d r i n k </dd><dt>Milk </ d t><dd> w h i t e c o l d d r i n k </dd>

</ d l>

Figure 14: Description list

8 Nested listAny type of the previous list could be used inside another type. You can useordered list inside unordered or vica versa. The following code is used to explaina nested unordered list. The results of the code is shown in Figure 15.

<ul>< l i >Coffee </ l i >< l i >Tea

<ul>< l i >Black t e a </ l i >< l i >Green t e a </ l i >

</ u l></ l i >< l i >Milk </ l i >

</ u l>

The following code reused the previous code with changing the inside unorderedlist to ordered list. The result of the code is shown in Figure 16

13

Figure 15: Nested unordered list

<ul>< l i >Coffee </ l i >< l i >Tea

<ol>< l i >Black t e a </ l i >< l i >Green t e a </ l i >

</ o l></ l i >< l i >Milk </ l i >

</ u l>

9 Cascade Style Sheet - CSSCSS is a style that makes the elements of the HTML web page appears in betterway. You can assign fonts, color, size to the text at the web page. The style couldbe assigned in one of three different locations: inline, internal and external style.

9.1 Inline styleAt this style, you have to assign any style at the tag of the element. However,the effect of the style is performed only on this element. You have to write

14

Figure 16: Nested list

style = ”properiety : value; ”, and change the properiety and the value. Forexample, style = ”color : blue; ” is used to make the color of the text blue.The compelete list of the CSS properieties could be found at this link http://www.w3schools.com/cssref/. The following code is used to clarifythe inline style .

<h1 s t y l e =” c o l o r : b l u e ;”> Thi s i s a Blue Heading </h1><h1 s t y l e =” c o l o r : r e d ;”> Thi s i s a r e d Heading </h1><h1 >Thi s i s a d e f a u l t Heading </h1>

Figure 17: inline style

15

The results of the code is presented in Figure 17. As you can see, the effect ofthe inline style is only on the element that the style specified at. The blue coloris applied on the first one only, while the red on the second heading and the onewithout style has the default color.

9.2 Internal StyleIn this style, a part of the HTML file started with < style > tag and ended with< /style > tag is used to specify the style of the current page. The effect ofthe style assigned to any element will be applied on all the elements iniside thecurrent page. If you specify the color of < h1 > as red at the style part, the effectof the style will be applied on each occurrence of < h1 > at the current file. Thefollowing code is used to specify some properties of heading and paragraphs.

<s t y l e >body { background−c o l o r : l i g h t g r e y ;}h1 {

c o l o r : b l u e ;f o n t−f a m i l y : v e r d a n a ;f o n t−s i z e : 300%;b o r d e r : 2px s o l i d b l a c k ;margin : 50 px ;padd ing : 10 px ;

}p { c o l o r : r e d ;background : y e l l l o w

f o n t−f a m i l y : v e r d a n a ;f o n t−s i z e : 300%;b o r d e r : 5px s o l i d b l a c k ;margin : 50 px ;padd ing : 10 px ;

}

#p1 {c o l o r : b l u e ;

}}</ s t y l e ><h1> Thi s i s h e a d i n g one </h1><h1> Thi s i s h e a d i n g two</h1><p> Thi s i s p a r a g r a p h one </p>

16

<p> Thi s i s p a r a g r a p h two</p><p i d =” p1”> I am d i f f e r e n t </p>

The code start with the style part where the proprieties of the heading and theparagraphs are stated. The color, the font, the font size, the border width, themargin and the padding are specified. You can see that the border width at theparagraph is heavier than the heading ( 5 for paragraph and 2 for heading). Youcan specify the proprieties you want in the same way. The results of the codecould be seen at Figure 18 If you want to make one element different, you have

Figure 18: internal style

to give it an ID. Hence, the element with the id will have the propriety assignedfor the id at the style part. Thereore, the paragraph with id = p1 has a blue colorbecause the this id is assigned to has blue color in style part.

9.3 External styleIn external style, you have to create a separate file with .css extension. In this file,all the required styles are specified. This file could be linked to any HTML fileyou want.Therefore, the effect of the external file may be extended to more thanone file. The link is written in the head part of the HTML page as follows:< head >< linkrel = ”stylesheet”href = ”styles.css” >< /head >The css file is specified after the href part.

17

10 Questions

10.1 Check true and false• HTML stand for Hyper Text Markup Language

• The largest heading is performed using h6 tag

• Background colour for the body is performed using < bodybg = ”yellow” >

• Hyperlink is performed using src statement

• < dl > is used to make a numbered list

• < radio > is used to created a radio button

• Drop down list is created using < list >

• < backgroundimg = ”background.gif” >is used to make web pagebackground

• < iframe > is used to insert a website inside your website

• The value option in a button indicates what is written on the button

• The largest heading is performed using h1 tag

• Background colour for the body is performed using < bodybg = ”yellow” >

• CSS file is linked to HTML file using rel statement

• < dl > is used to make a numbered list

• Drop down list is created using ¡Combo¿

• < bodyimg = ”background.gif” > is used to make web page background

• < div > is used to insert a website inside your website

• The value option in a button indicates what its reference name

18

10.2 What is the meaning of the following HTML• < br >

• style=”text-align:center;”

• < dl >,< dt >,< dd >

• < pre >

• < linkrel = ”stylesheet”href = ”styles.css” >

• < iframesrc = ”b.html” >< /iframe >

• < formaction = ”actionpage.php”autofocus >

• < legend > Personalinformation :< /legend >

• WWW

• URL

• Web Design

• Web Development

• < p >< /p >, < tr >< /tr > , < td >< /td >, < h1 >< /h1 >

• < b >< /b >,< i >< /i >,< u >< /u >

• < a >< /a >,< img >

• < ul >,< ol >

10.3 Drawing the output of the code10.3.1 Given the following code, what is the output webpage

1. <h1> F i r s t L e c t u r e </h1><p s t y l e =” c o l o r : b l u e ;”> Today , we w i l l t a k e a b o u t<br> t h e f i r s t c o n c e p t a t t h e l e c t u r e o f <b>HTML</b> </p><pre> HTML meansH y p e r l i n k<u> Markup</u><i> Language </ i></ pre>

19

———————————————————————————-

2. <a h r e f = h t t p : / / www. f a c e b o o k . c o m >Open Facebook now</a><img s r c =” f a c e b o o k . png ” a l t =” f a c e b o o k”><a h r e f = h t t p : / / www. f a c e b o o k . c o m ><img s r c =” f a c e b o o k . png ” a l t =” f a c e b o o k ”></a>

———————————————————————————-

3.< t a b l e s t y l e =” wid th :100%”>

< t r ><th>Name</ th>

<th>Address </ th><th>S a l a r y </ th><th>Email </ th></ t r >< t r >

<td>Ahmed</ td><td>I s m a i l i a </ td>

<td >4000</ td><td>a@gmail . com</ td>

</ t r ></ t a b l e >

———————————————————————————-

4. The Web Development needs t h e f o l l o w i n g :<o l t y p e = ”1”>< l i > HTML<ul>< l i > H : Hyper </ l i >< l i > T : Text </ l i >< l i > M : Markup</ l i >< l i > L : Language </ l i ></ u l></ l i >

< l i > CSS<dl><dt> C : </ d t><dd> C s t a n d s f o r cascade </dd>

20

<dt> S : </ d t><dd> Second S i n CSS s t a n d s f o r s t y l e </dd>

<dt> S : </ d t><dd> T h i r d S i n CSS s t a n d s f o r s h e e t </dd></ d l></ l i >< l i > PHP<u l s t y l e =” l i s t −s t y l e−t y p e : s q u a r e ”>< l i > P : S tand f o r PHP</ l i >< l i > H: H y p e r t e x t </ l i >< l i > P : P r e p r o c e s s o r </ l i ></ u l></ l i ></ o l>

10.3.2 Given the following S1.css file then the next HTML file, What exactlyis the output of the following HTML file?

s1.css

<s t y l e >d i v {

background−c o l o r : b l a c k ;c o l o r : w h i t e ;t e x t−a l i g n : c e n t e r ;padd ing : 5 px ;b o r d e r : 1px s o l i d b l a c k ;wid th :100 px ;

h e i g h t =100;f l o a t : r i g h t ;}# nav {

l i n e−h e i g h t : 3 0 px ;background−c o l o r : l i g h t g r a y ;h e i g h t : 300 px ;wid th :200 px ;f l o a t : l e f t ;padd ing : 5 px ;

}# s e c t i o n {

21

wid th :800 px ;f l o a t : l e f t ;padd ing : 1 0 px ;l i n e−h e i g h t : 3 0 px ;background−c o l o r : brown ;

}# t a b {

background−c o l o r : b l a c k ;wid th :200 px ;

c o l o r : w h i t e ;c l e a r : bo th ;t e x t−a l i g n : c e n t e r ;padd ing : 5 px ;

}

h1 {c o l o r : r e d ;t e x t−a l i g n : c e n t e r ;background−c o l o r : b l a c k ;

}p {

c o l o r : b l u e ;background−c o l o r : p ink ;}

t a b l e , td , t h {b o r d e r : 1px s o l i d b l a c k ;padd ing : 15 px ;t e x t−a l i g n : c e n t e r ;bo rde r−s p a c i n g : 15 px ;c o l o r : b l u e ;

}t h {

c o l o r : g r e e n ;background−c o l o r : r e d ;b o r d e r : 3px s o l i d b l a c k ;

}u l {c o l o r : g r e e n ;

22

l i s t −s t y l e−t y p e : s q u a r e ;background−c o l o r : cyan ;

}o l {c o l o r : g r e e n ;t y p e =” I ” ;

background−c o l o r : cyan ;}img{wid th =200;}</ s t y l e >

————————————————— The HTML file:—————————–

<html><head>

< l i n k r e l =” s t y l e s h e e t ” h r e f =” s1 . c s s ”></ head><body><h1>Team P l a y e r s </h1><d i v i d =” nav”><a h r e f = Vol ly . html> V o l l e y b a l l </a><br><a h r e f = T en n i s . html>Tennis </a><br><a h r e f = B as ke t . html>B a s k e t b a l l </a></ d iv><d i v i d =” s e c t i o n ”><h1>Score Shee t </h1><p>The s h e e t o f t h e n e x t match p l a y e r d i v i d e d by age<o l t y p e =” I ”>< l i > Under 20<ul>< l i > Ahmed</ l i >< l i > Mohamed</ l i >< l i > A l i 1</ l i ></ u l>< l i > Under 25<ul>< l i > Ib rah im </ l i >< l i > Sayed </ l i >< l i > Othman</ l i ></ o l>

23

< l i > Othe r<ul>< l i > Nour</ l i >< l i > Tamer</ l i >< l i >Shokrey </ l i ></ u l>

</ o l>

</p></ d iv><d i v ><a h r e f =Club . html> <img s r c = ” 2 . png ” a l t =” logo ” wid th =200 h e i g h t =200> </a></ d iv>< t a b l e s t y l e =” wid th :100%”>

<d i v i d =” t a b ”>< t r >

<th>Name</ th><th>Number o f Matches </ th><th>S t a r t i n g Matches </ th><th>Number o f g o a l s </ th></ t r >< t r >

<td>Ahmed</ td><td >60</ td>

<td >40</ td><td >10</ td>

</ t r >< t r >

<td>Ali </ td><td >40</ td>

<td >25</ td><td >24</ td></ t r >< t r >

<td>Mohamed</ td><td >43</ td>

<td >39</ td><td >11</ td></ t r >

24

</ t a b l e ></ d iv></body></ h tml

11 References1. ”Web Design or Web Development, Whats The Difference?,” purelybranded.com,

2 10 2016. [Online]. Available: http://www.purelybranded.com/insights/web-design-or-web-development-whats-the-difference/.

2. ”HTML Introduction,” w3schools.com, 20 9 2016. [Online].Available: http://www.w3schools.com/html/html_intro.asp.

25