HTML.pptx
- 1. HTML: AN INTRODUCTION STRUCTURE AND RELATED TERMS
- 2. HTML • FULL FORM : HYPERTEXT MARKUP LANGUAGE. • IT IS USED TO WEB PAGES OR DOCUMENTS. • WWW: WORLD WIDE WEB
- 3. WEB PAGE • A WEB PAGE IS A DOCUMENT THAT IS WRITTEN IN HYPERTEXT MARKUP LANGUAGE. • IT CONTAINS TEXT, GRAPHICS AND HYPERLINKS TO OTHER WEB PAGES. • IT IS ACCESSIBLE THROUGH THE INTERNET BY USING A BROWSER. • MULTIPLE WEB PAGES TOGETHER CONSTITUTE THE WORLD WIDE WEB. • URL: UNIFORM RESOURCE LOCATOR
- 4. • IT CAN BE STATIC AND DYNAMIC. • STATIC: SAME CONTENT EVERY TIME THEY ARE VIEWED. • DYNAMIC: DIFFERENT CONTENT EACH TIME WHEN ACCESSED.
- 5. WEBSITE • It is a set of linked web pages of related information on the internet. • The information may be related to a particular subject, published by a single person or an organisation. • You can move from one page to another on a website through hyperlinks.
- 6. WEB BROWSER • It is a software application to access the internet. • It allows users to view resources that are stored on a server. • It interprets text and commands of a web page and converts them to a form that the user can understand. • It can show text, audios, videos, animation, etc.
- 7. • A web browser helps in the following ways: • It contacts the web server and sends a request for information. • It receives information and displays the content on the user’s computer screen. • E.G.: Microsoft edge, google chrome, safari.
- 8. FEATURES OF HTML • It is one of the markup languages used for designing web pages. • HTML elements form the building blocks of all websites. • It is not case sensitive. It means that html doesn’t distinguish uppercase and lowercase letters. • It helps to create structured documents which include headings, paragraphs etc. • It doesn’t need any instructions that needs to be passed during its execution.
- 9. TERMS USED IN HTML 1. TAG: • They are the keywords used in an HTML document. • They are marked by angle braces(< and >) to write instructions and define how the content will be displayed by the web browsers. • E.G.: <HTML>, <HEAD>.
- 10. 2. ELEMENT • It is the content written within the a start or opening tag and end or closing tag. • <P> ; P is the element. • E.G.: <TITLE> LEARNING WEBPAGE. </TITLE> OPENING TAG CLOSING TAG
- 11. 3. ATTRIBUTE • It refers to providing additional information which can be added to a tag. • They appear inside the opening tag and the specific information or values within quotation marks. • E.g.: <BODY BGCOLOR=“BLUE”> // This code will give background color blue to the body section.
- 12. STRUCTURE <HTML> <HEAD> <TITLE> THIS IS THE TITLE SECTION. </TITLE> </HEAD> <BODY> // THIS SECTION CONTAINS THE BODY OF THE WEB PAGE. </BODY> </HTML>
- 13. CONTAINER AND EMPTY TAGS IN HTML • Html uses pre-defined tags in a document which are understood by the web browsers to display the content. • Two categories of html tags are: 1. Container tags 2. Empty tags
- 14. • When the opening and closing tags are used in pairs in an html document, they are known as container tags. • They are also known as on tag and off tag respectively. • On tag(<element name>) and off tag(</element name>). • Eg.: <HTML> … </HTML>
- 15. • The tags which do not require a closing tag in an html document are called empty tags. • It has only an ON tag in the document. • E.G.: <BR>,<HR>
- 16. STARTING AN HTML DOCUMENT • To work in html, your computer system should have: 1. A text processor 2. A web browser • To create an html document on notepad: • Step1: Click start followed by clicking “notepad” from the pop up menu. • Step2: An untitled notepad will appear on the screen. You can start writing an html document code by using tags.
- 17. SAVING AN HTML DOCUMENT • Step1: Click file from the file menu. • Step2: Select ‘Save as’ from the drop-down list. • Step3: Enter the file name with extension ‘HTML’. • Step4: Click the ‘Save’ option.
- 18. VIEWING AN HTML DOCUMENT • Step1: Locate the file where you have saved the file. Select the file and right- click on it. • Step2: Select ‘open with’ followed by clicking ‘Microsoft edge’.
- 19. OPENING AN HTML FILE • Step1: Select your html file and right-click on it. • Step2: Select ‘open with and click on ‘Notepad’.
- 20. PARAGRAPH TAG (<P>) • It is a container tag. • The opening tag <p> is added at the beginning of a paragraph and the closing tag </p> at the end of a paragraph. • A single line is inserted before and after the enclosed paragraph. • E.G.: <P> This is an example to show that paragraph tag is used to insert lines. Check this code.</P> <P> HELLO WORLD!</P> <P> My Name Is Sofia.</P>
- 21. LINE BREAKS(<BR>) • TO INSERT A BLANK LINE IN THE WEBPAGE. • IT IS AN EMPTY TAG. • EG: • <P> HELLO…<BR> HOW ARE YOU? <BR> ARE YOU COMFORTABLE? </P> OUTPUT: HELLO… HOW ARE YOU? ARE YOU COMFORTABLE?
- 22. HEADING TAG(H1-H6) • HTML ALLOWS YOU TO HIGHLIGHT HEADINGS IN A WEB PAGE BY USING THE HEADING TAGS. • THEY ARE CONTAINER TAGS. • THEY INCLUDE SIX DIFFERENT LEVELS OF HEADINGS WHICH VARY FROM <H1> TO <H6>. • H1 - LARGEST HEADING • H6 - SMALLEST HEADING
- 23. • SYNTAX: <HEADING TAG>STRING OF TEXT FOR HEADING</HEADING TAG> <H1>HELLO…</H1> <H2>HELLO…</H2> <H3>HELLO…</H3> <H4>HELLO…</H4> <H5>HELLO</H5> <H6>HELLO</H6> OUTPUT: HELLO… HELLO… HELLO… HELLO… HELLO… HELLO…
- 24. CENTER TAG(<CENTER>) • IT IS USED TO ALIGN THE TEXT HORIZONTALLY TO THE CENTER OF THE PAGE IN AN HTML DOCUMENT. • IT IS A CONTAINER TAG MEANS THE CONTENT IS WRITTEN BETWEEN THE OPENING AND CLOSING TAGS. • SYNTAX: <CENTER TAG> STRING OF TEXT</CENTER TAG> • E.G.: <CENTER><H3>HELLO WORLD!</H3></CENTER>
- 25. BOLD, ITALICS AND UNDERLINE TAGS • HTML ALLOWS TO USE THE FEATURES- BOLD, ITALICS OR UNDERLINE AND CHANGE TEXT STYLE OF A DOCUMENT. • THESE ARE CONTAINER TAGS. • SYNTAX: TO DISPLAY THE TEXT IN BOLD: <b>STRING OF TEXT</b> TO DISPLAY THE TEXT IN ITALICS: <i>STRING OF TEXT</i> TO UNDERLINE THE TEXT: <u>STRING OF TEXT</ u >
- 26. SUPERSCRIPT(<SUP>) AND SUBSCRIPT(<SUB>) TAGS • THE SUPERSCRIPT TAGS ARE USED TO REPRESENT SOME TEXT/NUMBER ABOVE NORMAL LINE. • THE SUBSCRIPT TAGS ARE USED TO REPRESENT THE TEXT/NUMBER BELOW THE LINE. • EG: (A+B)² : (A+B)<SUP>2</SUP> H₂SO₄ : H<SUB>2</SUB>SO<SUB>4</SUB>
- 27. BACKGROUND AND TEXT COLOUR ATTRIBUTES • YOU CAN CHANGE THE APPEARANCE OF THE DOCUMENT BY CHANGING THE BACKGROUND AS WELL AS THE TEXT COLOUR. • SYNTAX: <BODY BGCOLOR=“COLOR NAME”> // BGCOLOR, TEXT ARE ATTRIBUTES AND COLOR NAME IS THE VALUE OF THE ATTRIBUTE. • <BODY BGCOLOR=“COLOR NAME” TEXT=“COLOR NAME”>
- 28. ATTRIBUTES OF FONT TAG <FONT> TAG IS USED TO CHANGE THE APPEARANCE OF TEXTS USING THEIR ATTRIBUTES. 1. FONT FACE ATTRIBUTE: IT SPECIFIES THE TYPE OF FONT TO BE USED IN AN HTML DOCUMENT. SYNTAX: <FONT FACE=“NAME OF THE FONT”> E.G.: <FONT FACE=“ARIAL”> 2. FONT SIZE ATTRIBUTE: IT SPECIFIES THE FONT SIZE WHICH VARIES FROM 1 TO 7. DEFAULT FONT SIZE OF TEXT IN THE BODY IS 3. E.G.: <FONT SIZE=“6”> 3. FONT COLOR ATTRIBUTE: IT SPECIFIES THE TEXT COLOUR IN AN HTML DOCUMENT. E.G.: <FONT COLOR=“RED”>
- 29. ALIGNMENT ATTRIBUTE • HTML PROVIDES THE FACILITY TO ALIGN THE TEXT. • SYNTAX:<PALIGN=“ALIGNMENT”> • 4 DIFFERENT WAYS OF ALIGNING TEXT ARE: 1. LEFT 2. RIGHT 3. CENTER 4. JUSTIFY
- 30. • SYNTAX: <PALIGN=“ALIGNMENT”> 1. LEFT ALIGNMENT : <P ALIGN = “LEFT”> 2. RIGHT ALIGNMENT : <P ALIGN = “RIGHT”> 3. CENTER ALIGNMENT : <P ALIGN = “CENTER”> 4. JUSTIFY : <P ALIGN = “JUSTIFY”>