Hyper Text Markup Language HTML: A Tutorial

Size: px

Start display at page:

Download "Hyper Text Markup Language HTML: A Tutorial"

Lorraine Alexander
5 years ago
Views:

1 Hyper Text Markup Language HTML: A Tutorial Ahmed Othman Eltahawey December 21, 2016 The World Wide Web (WWW) is an information space where documents and other web resources are located. Web is identified by URLs ( the address that you write 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 you to another location The web was Invented by the English scientist Tim Berners-Lee in He wrote the first web browser in The creation of a web site includes two main operations: Web designing and web development. Web designing is the process of designing the layout of the website. It answers the question of how the website looks like. The locations, the fonts, the colors and the sizes of the different elements are determined. There are different programming languages that are used in designing websites. The most popular languages are HTML (hypertext markup language), CSS. PHP and JavaScript are programming languages geared toward functionality but can also be used to control the behavior and the look and feel of 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, Faculty of Computers & Informatics, Suez Canal University, Ismailia, Egypt, ahmedeltahawey@gmail.com 1

Figure 1: HTML page structure or in response to a specific event or user action. For example, when a hyperlink is clicked. Web development is performed by a specialist programmer [6].

2 Figure 1: HTML page structure or in response to a specific event or user action. For example, when a hyperlink is clicked. Web development is performed by a specialist programmer [6]. Python, PHP or HTML are among the languages used in developing a website. In this section, we will give a short introduction to HTML. 1 HTML A markup language is a set of markup tags described by HTML tags. Each HTML tag describes different document content. HTML tags are the hidden keywords within 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. The code 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

3 The text between < head > and < /head > provides information about the document The text between < title > and < /title > provides a title for the document The text between < body > and < /body > describes the visible page content 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 browser such as Internet Explorer, Google Chrome or Firefox. Figure 3 shows the results of applying the previous code. 2 HTML Headings HTML headings are defined with the < h1 > to < h6 > tags with different sizes 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 at Figure 4. 3

4 Figure 3: The webpage created after execturting Fig. 2 code <h1>l a r g e s t s i z e heading </h1> <h2>s m a l l e r s i z e heading </h2> <h3>s m a l l e r s i z e heading </h3> <h4>l a r g e s t s i z e heading </h4> <h5>s m a l l e r s i z e heading </h5> <h6>s m a l l e s t s i z e heading </h6> Figure 4: The headeing results 3 HTML Paragraphs HTML paragraphs are defined with the < p > text < /p > tags. The spaces and the new lines are ignored. If you want to force for a new line you should write < br >. If you want to have a paragraph with the same formatting like you 4

5 write, write what you want between < pre > < /pre > tags. The results of the following code could be shown at Figure 5. <p>this 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>this 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 with 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 the following code will appear at Figure 6. <p>this 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>this 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 with </u> t h e same f o r m a t t i n g </ pre > <hr> 4 HTML links Links are a text that when clicked will open another page or do certain action. To make a hyperlink, you have to specify: The text that will appear on the screen 5

6 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 hyperlink as 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 be opened when the text is clicked link text: the text that will appear on the webpage and that when clicked the url will open. For example, the following code is used to open Google web page when the text opengoogle is clicked. <a h r e f = g o o g l e. com > Open google </a> 5 HTML Images HTML allows you to put an image inside your webpage. You have to specify the path of the image that should appear as well as an alternative text that might appear 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

7 alt= some text : will appear if HTML failed to show the image for any reason. If we want to put an image called flower.jpg located at the same folder with the webpage, 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 will appear instead. 5.1 Images as links Images can be used instead of text as hyperlink. The same < a > tag is used but the image tag is inserted instead of the link text. The HTML tag to use image as hyperlink 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 Google website is opened. The following code can be used to open Google website using the flower image: <a h r e f = g o o 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 Tables The tables could be created in HTML using the tag < table >< /table > as follows: 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 data inserted in it. 7

8 <t a b l e s t y l e = width :100% > <th > Header 1</ th > <th > Header 2</ th > <td >Data 1</ td > <td >Data 2</ td > <td >Data 1</ td > <td >Data 2</ td > </ t a b l e > The results of executing the previous code is shown in figure 7. The table has no borders 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 = width :100% > <th > Name</ th > <th > Grades </ th > <td >Ahmed</ td > <td >50</ td > <td >Mohamed</ td > <td >60</ td > </ t a b l e > And the result of the previous code is shown in figure 8. Here, the border thickness is 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. For example, if you want to expand the row or the column you can use: colspan = 2: to expand the column into two column.

9 specified as 100%. There are a lot of options at the designing of the tables. For example, if you want to expand the row or the column you can use: colspan = 2: to expand the column into two column. Expand the column into 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 = width :100% > <t h > Name</ th > <t h c o l s p a n =2> Grades </ th > <td >Ahmed</ td > <td >50</ td > <td >40</ td > <td >Mohamed</ td > <td >60</ td > <td >80</ td > </ t a b l e > Here, the grade column is expanded into two columns and the thickness of the border is reduced to 1 10 Figure 9: The table with column expanded 9

10 7 HTML Lists HTML can generate either ordered or unordered list. 7.1 Unordered list The unordered list is generated using the< ul >< /ul > tags. Moreover, each item in the unordered list is generated using the < li >< /li > tag. The following code is used to generate 3 items unordered list. The result of the code is shown at 10 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 > </ ul > Figure 10: Unordered list The type of the item symbol could be specified at the header of the list. The unordered list has four different types of the item symbol 1. The following code Style list-style-type:disc: list-style-type:circle list-style-type:square list-style-type:none Description The list items will be marked with bullets (default) The list items will be marked with circles The list items will be marked with squares 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

11 Three i t e m s u n o r d e r e d l i s t with 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 : square > <l i >Coffee </ l i > <l i >Tea </ l i > <l i >Milk </ l i > </ ul > The result of the code is presented at Figure 11 Figure 11: Unordered list with square symbol 7.2 Ordered list The unordered list is generated using the< ol >< /ol > tags. Moreover, each item in the unordered list is generated using the < li >< /li > tag. The following code is used to generate 3 items ordered list. The result of the code is shown at Figure 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 > </ ol > 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 code use 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 with 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 > </ ol > 11

12 Figure 12: ordered list Style type= 1 type= A type= a type= I type= i Description Numbered with numbers (default) Numbered with uppercase letters Numbered with lowercase letters Numbered with uppercase roman numbers 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 list A description list is a list of terms, with a description of each term. < dl > tag defines the description list, < dt > tag defines the term (name), and < dd > tag describes each term The following code use the description list to describe each item and the result of executing the code is shown at Figure 14. <dl > 12

13 <dt >Coffee </ dt > <dd> b l a c k h o t d r i n k </dd> <dt >Milk </ dt > <dd> w h i t e c o l d d r i n k </dd> </ dl > Figure 14: Description list 8 Nested list Any type of the previous list could be used inside another type. You can use ordered list inside unordered or vica versa. The following code is used to explain a 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 > </ ul > </ l i > <l i >Milk </ l i > </ ul > The following code reused the previous code with changing the inside unordered list to ordered list. The result of the code is shown in Figure 16 13

14 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 > </ ol > </ l i > <l i >Milk </ l i > </ ul > 9 Cascade Style Sheet - CSS CSS is a style that makes the elements of the HTML web page appears in better way. You can assign fonts, color, size to the text at the web page. The style could be assigned in one of three different locations: inline, internal and external style. 9.1 Inline style At 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. For example, style = color : blue; is used to make the color of the text blue.

15 Figure 16: Nested list style = properiety : value;, and change the properiety and the value. For example, 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: // The following code is used to clarify the inline style. <h1 s t y l e = c o l o r : b l u e ; > This i s a Blue Heading </h1> <h1 s t y l e = c o l o r : r e d ; > This i s a r e d Heading </h1> <h1 >This i s a d e f a u l t Heading </h1> Figure 17: inline style 15

16 The results of the code is presented in Figure 17. As you can see, the effect of the inline style is only on the element that the style specified at. The blue color is applied on the first one only, while the red on the second heading and the one without style has the default color. 9.2 Internal Style In 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 of the style assigned to any element will be applied on all the elements iniside the current page. If you specify the color of < h1 > as red at the style part, the effect of the style will be applied on each occurrence of < h1 > at the current file. The following 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 ; padding : 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 ; padding : 10 px ; #p1 { c o l o r : b l u e ; </ s t y l e > <h1> This i s h e a d i n g one </h1> <h1> This i s h e a d i n g two </h1> <p> This i s p a r a g r a p h one </p> 16

<p> This 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 the paragraphs are stated.

17 <p> This 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 the paragraphs are stated. The color, the font, the font size, the border width, the margin and the padding are specified. You can see that the border width at the paragraph is heavier than the heading ( 5 for paragraph and 2 for heading). You can specify the proprieties you want in the same way. The results of the code could 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 assigned for the id at the style part. Thereore, the paragraph with id = p1 has a blue color because the this id is assigned to has blue color in style part. 9.3 External style In 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 file you want.therefore, the effect of the external file may be extended to more than one 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

18 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 page background < 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

19 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 = action p age.php autofocus > < legend > P ersonalinformation :< /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 code 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 of <b>html</b> </p> <pre > HTML means H y p e r l i n k <u> Markup </u> <i > Language </ i > </ pre > 19

20 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 = width :100% > <th >Name</ th > <th >Address </ th > <th >S a l a r y </ th > <th > </ th > <td >Ahmed</ td > <td >I s m a i l i a </ td > <td >4000</ td > <td >a@gmail. com</ td > </ t a b l e > 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 > </ ul > </ l i > <l i > CSS <dl > <dt > C : </ dt > <dd> C s t a n d s f o r cascade </dd> 20

21 <dt > S : </ dt > <dd> Second S i n CSS s t a n d s f o r s t y l e </dd> <dt > S : </ dt > <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> </ dl > </ 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 : Stand 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 > </ ul > </ l i > </ ol > Given the following S1.css file then the next HTML file, What exactly is 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 ; padding : 5 px ; b o r d e r : 1px s o l i d b l a c k ; width : 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 ; width : 200 px ; f l o a t : l e f t ; padding : 5 px ; # s e c t i o n { 21

22 width :800 px ; f l o a t : l e f t ; padding : 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 ; width :200 px ; c o l o r : w h i t e ; c l e a r : b oth ; t e x t a l i g n : c e n t e r ; padding : 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 : pink ; 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 ; padding : 15 px ; t e x t a l i g n : c e n t e r ; border 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

23 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{ width =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 = Volly. html> V o l l e y b a l l </a><br> <a h r e f = T e n n i s. html>tennis </a><br> <a h r e f = B a s k e t. html>b a s k e t b a l l </a> </ div > <d i v i d = s e c t i o n > <h1>score Sheet </h1> <p>the s h e e t of 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 > </ ul > <l i > Under 25 <ul > <l i > Ibrahim </ l i > <l i > Sayed </ l i > <l i > Othman </ l i > </ ol > 23

24 <l i > Other <ul > <l i > Nour </ l i > <l i > Tamer </ l i > <l i >Shokrey </ l i > </ ul > </ ol > </p> </ div > <d i v > <a h r e f =Club. html> <img s r c = 2. png a l t = logo width =200 h e i g h t =200> </ div > <t a b l e s t y l e = width :100% > <d i v i d = t a b > <th >Name</ th > <th >Number of Matches </ th > <th >S t a r t i n g Matches </ th > <th >Number of g o a l s </ th > <td >Ahmed</ td > <td >60</ td > <td >40</ td > <td >10</ td > <td >Ali </ td > <td >40</ td > <td >25</ td > <td >24</ td > <td >Mohamed</ td > <td >43</ td > <td >39</ td > <td >11</ td > 24

25 </ t a b l e > </ div > </ body> </ html 11 References 1. Web Design or Web Development, Whats The Difference?, purelybranded.com, [Online]. Available: insights/web-design-or-web-development-whats-the-difference/. 2. HTML Introduction, w3schools.com, [Online]. Available: 25

CSC 121 Computers and Scientific Thinking

CSC 121 Computers and Scientific Thinking Fall 2005 HTML and Web Pages 1 HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language