Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Basic HTML


Published on

Published in: Education, Technology

Basic HTML

  1. 1. Polangui General Comprehensive High School Polangui, Albay Prepared by: Mr. Eric M. Marilag PGCHS ICT – Teacher
  2. 2. What is Internet?• a computer network made up of thousands of networks worldwide• It consist of millions of computers interconnected with one another via a modem and Transmission Control Protocol/Internet Protocol suite, (TCP/IP)
  3. 3. What is Internet?is a global network of computers whichare mostly connected using telephonelines/satellites for the purpose of sharinginformation
  4. 4. What is Internet?• Is also known as Interconnected Net, Information Highway, or simply known as NET.• Is a mechanism to distribute information and provide interaction between individuals and their computers without regard for geographic location.
  5. 5. What is Internet?
  6. 6. Uses of Internet1.Internet is used to communicate with people.2.Internet is used to get information.3.Internet is used for on-line shopping.4.Internet is used for entertainment.5.Internet is used to transact business.
  7. 7. Requirements Needed to Access the NET • Is the machine used to send and receive electronic documents via internet.
  8. 8. Requirements Needed to Access the NET • Is a device that transmit analog signal and receives data in digital signal through telephone lines. It is short for Modulator /Demodulator.
  9. 9. Requirements Needed to Access the NET Are used to transmit signals from one computer to another with help of modem.
  10. 10. Requirements Needed to Access the NETInternet Service Provider– is a company that providesconnection to the Internet.
  11. 11. Requirements Needed to Access the NET Web Browser – is a program that is used to navigate the internet.
  13. 13. HOW THE INTERNET WORKS1. Do a dial – up connection to your internet Service Provider (ISP.2. The modems converts the signals from your computer to signals that travel over the telephone lines to your ISP.3. Open the Web browser and then, enter a website address in the address box.
  14. 14. HOW THE INTERNET WORKS4. The Web browser sends the request to the ISP.5. The Web server locates the files and then downloads them to your computer.6. The web browser assembles the Web page on the screen.
  15. 15. What is a Web page?Web page are actually pages of text with coded messages telling a browser what to do. If you open a web page through a word processor, you will see a lot of funny looking symbols and codes. When you view the same page through your browser, you see text, colors and images.
  16. 16. Different types of Web pagesSTATIC WEB PAGE A web page that is written and then served to the user as is, with no other information added to it, all the web server does is display it. Often these types of pages will be the basis for an interactive site, as static pages load faster, and because they dont have any changing information in them, you know how they will be displayed, as there is less to go wrong in them.
  17. 17. Web browseris a software application used to locate and display Web pages.The purpose of a web browser is toread HTML documents and displaythem as web pages. The browserdoes not display the HTML tags, butuses the tags to interpret the contentof the pages.
  18. 18. WebsiteCollection of web pages.A website can be viewed through its website address or technically known as UNIFORM RESOURCE LOCATOR (URL).
  19. 19. What is URL•Uniform Resource Locator – is the address of an object, a document, a file or a web page on the internet.
  20. 20. Parts of URL World Wide Web Locator Domain Name Related Web Pages
  21. 21. Parts of URLhttp://. (Hypertext transfer protocol)- Protocol used in the communication between the browser and the web serverwww.- Represents by the characters www. This indicates a page on the world wide web
  22. 22. Parts of URLDomain Name- Tells the name of the owner of the site.- Suffix type extension name that tells what the site is about.- Sometimes it has country code that tells where the website is located. - Learnthenet – name of the owner of the site. - .com – a suffix name that tells a site is a commercial site.
  23. 23. Some Common Suffix Extension - commercial - educational - government - network - organizational - military agency
  24. 24. Some of the Country Location - - - United - Australia
  25. 25. Parts of URLRelated Web Pagesenglish/start.htm• Is a directory or folder connected to the web that contains a group of related web pages.
  26. 26. Identify the Parts of URL 7 8 9 10
  27. 27. Hyper Text MarkupLanguage
  28. 28. HTML• The language used to write Web pages which consists of codes (tags) embedded in the text.• It is not a programming language, it is a markup language.• Invented in 1990 by Tim Berners – Lee• Simple ASCII text files.• File extension name .html or .htm
  29. 29. HTML• Hidden codes that helps us communicate with others on the World Wide Web (www).• The tags tell the built in function in the web browser how to structure the text. For instance put text in a bold font• An HTML file can be created using a simple text editor
  30. 30. This is what HTML looks like
  31. 31. Markup Language- Combines text and extra information about the text. The extra information, for example about the text’s structure or presentation, is expressed using markup, which is intermingled with the primary text.
  32. 32. • Markup Language – is a set of markup tags
  33. 33. Basic Tools To setup a WebsiteText editor - Page Spinner for Macintosh - Notepad for windows - WordPad.Web Browser - Internet Navigator - Mozilla Firefox
  34. 34. HTML Basic StructureHTML– the first and last tags in a document should always be the html tags. These are the tags that a web browser where the html in your document begins and ends. <HTML> </HTML>
  35. 35. HTML Basic StructureHEAD– the head tags contain all of the document’s header information.
  36. 36. HTML Basic StructureTITLE this container is placedwithin the head structurebetween the title tags, youshould have the title of yourdocument.
  37. 37. HTML Basic StructureBODY– comes after the head structure. Where the actual document contents are placed.
  38. 38. HTML Document Template<HTML> - tells the web on the type of document.<HEAD> - technical information about the document is stated.<TITLE> - gives the document a name.<BODY> - where the actual document contents are placed.
  39. 39. <HTML><HEAD><TITLE>Document Title</TITLE></HEAD><BODY>This is for the body…….</BODY></HTML>
  40. 40. TAGS• Are the building blocks of HTML.• Keywords surrounded by angle brackets.• It contains the layout and formatting of the elements in HTML.• HTML markup tags are usually called HTML tags
  41. 41. Left angle bracket Right angle bracket ElementElement - is the coded commands within HTML. - tells the browser how to display the web pages.
  43. 43. Two kinds of HTML tagsContainer tag are paired with a beginning (or open) and an ending tag. (/) forward slash is an indicator that the tag has ended. <html> opening tag </html> closing tag
  44. 44. Two kinds of HTML tagsEmpty tag can stand alone. this tag can be encoded even without the closing tag. the tag <br> is one that adds a line break.
  45. 45. Tag – NAME is the name of the tag or thehtml command.TAG – NAMEs cannot contain spacesATTRIBUTES control the properties of thetag using the given VALUE and are placedONLY inside the starting tagVALUE is surrounded by quotation marksAffected Text /Image /Object is displayedbased on the tag and its attributes.
  46. 46. An equal sign (=) separates the attributesfrom its value.Each tag has some default value for itsattributes.A tag can have many attributes and eachattributes can have many values; someattributes have no value.Tags usually surround Affected Text / image /object
  47. 47. HTML Text StructureHeadings–The heading structure are most commonly used to set apart document or section titles.
  48. 48. Headings• Define the format of structure of the document>there are six levels of headings in HTML<H#> - start of heading</H#> - end of headingWhere # is a number from 1 to 6Ex. <h1>Heading</h1>
  49. 49. <html><head><title>This is a sample Heading</title></head><body><h1>heading 1</h1><h2>heading 2</h2><h3>heading 3</h3><h4>heading 4</h4><h5>heading 5</h5><h6>heading 6</h6></body></html>
  50. 50. <Heading>Tag Attributes Heading tags have attributes and the important attributes are ALIGN and TITLE• ALIGN – changes the alignment of the headings.Values• Left (Default Value) aligns the heading to the left• Right – aligns the heading to the right.• Center – aligns the heading to the center.• Justify – justifies the heading.
  51. 51. Example:<h1 align="center">Align Center</h1><h2 align=“right”>Align Right</h2>
  52. 52. <BODY>Tag Attributes - Controls the properties of the document as a whole.• TEXT – specifies the color of normal text in the page.Sample: <BODY TEXT=“Red”>• LINK - specifies the color of text with hyperlink in the pageSample: <BODY LINK=“Blue”>• VLINK – specifies the color of text with a visited hyperlink in the page.Sample: <BODY VLINK=“#FF0000”>
  53. 53. <BODY>Tag Attributes• ALINK – specifies the color of text with hyperlink when clickedSample: <BODY ALINK=“#FF0000”>• BGCOLOR – specifies the background color the page.Sample: <BODY BGCOLOR=“#0000FF”>• BACKGROUND – specifies the background image of he page.Sample: <BODY BACKGROUND=“MybackgroundImage.jpg” >
  54. 54. Paragraphs• In HTML you indicate paragraphs with the <P> and </P> elements.• Without these elements the document becomes one long paragraph.
  55. 55. HTML Code Browser Display This is a very short paragraph<P> This is a very short to illustrate my point.paragraph to illustrate mypoint.</P> <P>And this is And this is the secondthe second paragraph. </P> paragraph.<P> Although this Although this is writtenis written differently differently with lots ofwith lots of carriage returns carriage returns it still onlyit still only displays displays the paragraphs whenthe paragraphs when you put in the Paragraph put in the ParagraphTag.</P> Like so.<P> Like so.</P>
  56. 56. Paragraph Attributes• Paragraph alignment can be manipulated by including either the RIGHT, LEFT, or CENTER attributes within the <p> HTML Code Browser Display<P ALIGN=“left”> This paragraph is This paragraph is left aligned.left aligned. </P><P ALIGN=“CENTER”> This is a This is a centered paragraph.centered paragraph. </P><P ALIGN=“RIGHT”> This paragraph This paragraph is right right aligned. </P>
  57. 57. BREAK TAGSLINE BREAK TAGS <BR> are used to introduce any line breaks Tell the browser that this is the end of the line and start to a new one.<BR> - place where the line break is to insertedExample: First line<BR>
  58. 58. NO LINE BREAK TAGSUsed to surround text that will be displayed in a single line<NOBR> - Start of no line break tags</NOBR> - End of no line break tags
  59. 59. Adding listsa) unordered list.<ul> <li> the first list item</li> <li> the second list item</li></ul>
  60. 60. PHYSICAL TAGS• Define how text should be displayed on the browser• Control the physical characteristic of the text• There are 10 physical tags in HTML.
  61. 61. Physical Tags1. ITALIC - formats the text to italic <I> - start of the italic </I> - end of the italic formatExample : <I>Italic</I>Result : Italic2. BOLD – formats the text to bold. <B> - start of the bold format </B> - end of the bold formatExample : <B>Bold</B>Result : Bold3. UNDERLINE – underlines the text <U> - start of the underline text </U> - end of the underline textExample : <U>Underlined</U>Result : Underlined
  62. 62. Physical Tags4. STRIKETROUGH – strikes through the text. <STRIKE> - start of the struck text </STRIKE> - end of the struck textExample : <STRIKE>Struck</STRIKE>Result : Struck5. SUPERSCRIPT – superscript the text <SUP> - start of the superscripted text </SUP> - end of the superscripted textExample : <SUP>Superscripted</SUP>Result : Superscripted6. SUBSCRIPT – subscripts the text <SUB> - start of the subscripted text </SUB> - end of the subscripted textExample : <SUB>Subscripted</SUB>Result : Subscripted
  63. 63. Physical Tags7. TYPEWRITER – uses typewriter font as text font. <TT> - start of the typewriter font text <TT> - end of the typewriter font text.Example :<TT>Typewriter</TT>Result :Typewriter8. BIG – uses bigger font size. <BIG> - start of the bigger text. </BIG> - end of the bigger text.Example :<BIG>Tag</BIG>Result :Tag9. SMALL – uses small font size. <SMALL> - start of the smaller text. </SMALL> - end of the smaller text.Example :<SMALL>Tag</SMALL>Result :Tag
  64. 64. Physical Tags10. STRIKETROUGH (alternative) – strikes throughthe text. <S> - start of the struck text. </S> - end of the struck textExample : <S>Struck</S>Result : StruckPHYSICAL TAGS NESTING-One tag can be placed inside another.Example : <B><S>Struck</S></B>Result : StruckExample : <I><B><S>Struck</S></B></I>Result : Struck
  65. 65. LOGICAL TAGS• Indicate the type of content they enclose• Do not determine the display of the text• There are 9 logical tags in HTML.
  66. 66. Logical Tags1. STRONG - indicates the text to be strong <STRONG> - start of the strong </STRONG> - end of the strongExample : <STRONG> HTML </STRONG>Result : HTML2. EMPHASIS – emphasis the text. <EM> - start of the emphasis </EM> - end of the emphasisExample : <EM> HTML </EM>Result : HTML3. ABBREVIATION – indicates that the text is an abbreviation. <ABBR> - start of the abbreviation </ABBR> - end of the abbreviationExample : <ABBR>abbreviation </ABBR>Result : abbreviation
  67. 67. Logical Tags4. CITATION - indicates the text is a citation. <CITE> - start of the citation </CITE> - end of the citationExample : <CITE> Citation </ CITE>Result : Citation5. CODE – indicates the text is a code. <CODE> - start of the code </CODE> - end of the codeExample : <CODE> Code</CODE>Result : Code6. DEFINITION– indicates that the text is a definition. <DFN> - start of the definition </DFN> - end of the definitionExample : <DFN>definition</DFN>Result : definition
  68. 68. Logical Tags7. KEYBOARD - indicates that the text should be like keyboard strokes. . <KBD> - start of the keyboard strokes </KBD> - end of the keyboard strokesExample : <KBD> keyboard </KBD>Result : keyboard8. SAMPLE – indicates the text is a sample. <SAMPLE> - start of the sample </SAMPLE> - end of the sampleExample : <SAMPLE>Sample</SAMPLE>Result : Sample9. PROGRAMMING VARIABLE – indicates that the text is a programming variable. <VAR> - start of the programming variable </VAR> - end of the programming variableExample : <VAR>Programming Variable</VAR>Result : Programming Variable
  69. 69. HORIZONTAL RULEHORIZONTAL RULE <HR> - used to separate blocks of text in a document. - puts a straight line across the page . - no end tag <HR> - puts a horizontal rule
  70. 70. HORIZONTAL RULE ATTRIBUTESWIDTH – changes the width of the horizontal rule.VALUES In pixel In PercentageEx: <HR WIDTH=“50”> - puts a 50 pixels long line. < HR WIDTH=“50%”> - puts a line 50% of the page’s width.
  71. 71. HORIZONTAL RULE ATTRIBUTESSIZE – changes the sizes of the horizontal rule.Ex: <HR SIZE=“5”> - puts a 5 pixels THICK line.ALIGN – changes the alignment of the horizontal ruleExample: <HR ALIGN=“CENTER”>COLOR – changes the color of the horizontal rule.Examples: <HR COLOR=“RED”> <HR COLOR=“#FF0000”>
  72. 72. FONT TAG• Changes various properties of text <FONT> - start of the font specific text. </FONT> - end of the font specific text.
  73. 73. FONT ATTRIBUTES• Allows you to specify font properties.FACE – changes the font face or font typeValues: Name of the fontExample: <FONT FACE=“Arial”>HTML</FONT>
  74. 74. FONT ATTRIBUTESCOLOR – changes the font color.Values can be:Color Name – name of the color (Ex: Red, Blue, etc.) Color Code– 6 Digits Hexadecimal Color Code.Ex: <FONT COLOR=“Blue”>HTML</FONT> <FONT COLOR=“#FF0000”>HTML</FONT>
  75. 75. FONT ATTRIBUTESSIZE – changes the font size.Values can be:Any number between 1 to 7: being the smallest and 7 being the biggest, (3 is the default value)Relative values, + and -, for increasing or decreasing font size relative to the current size.Ex: <FONT SIZE=“1”>Smallest text</FONT> <FONT SIZE=“+4”>larger text</FONT>
  76. 76. MARQUEE<MARQUEE>………..</MARQUEE>• Scrolling Objects (makes your text, objects scroll.) (Text, Graphics, etc.)Attributes: Direction = left/right/up/down Behavior = scroll/slide/alternate Bgcolor = color or Hexadecimal Width = n% Height = n%
  77. 77. MARQUEE<MARQUEE>………..</MARQUEE>Ex:<marquee behavior=“slide” direction=“left” bgcolor=“red”> The Marquee </marquee><marquee behavior=“slide” direction=“left” bgcolor=“red” width=“50” height=“30”> The Marquee </marquee>
  78. 78. ORDERED LISTS• It includes letters or numbers that indicate the sequence<OL> - Mark the start of list and indention</OL> - is required to signal end of the list and cancel indention and sequencing.<LI> is used for individual list item.Ex.<OL><LI>List item one<LI> List item two
  79. 79. UNORDERED LISTSUNNUMBERED LIST or BULLETED LIST.<UL> ………</UL>ATTRIBUTE:TYPES – changes the bullet used by the list.VALUES: disc(default) - disc bullet circle – circle bullet square - square bullet
  80. 80. UNORDERED LISTSUNNUMBERED LIST or BULLETED LIST.<UL> ………</UL>ATTRIBUTE:TYPES – changes the bullet used by the list.VALUES: disc(default) - disc bullet circle – circle bullet square - square bullet
  81. 81. UNORDERED LISTSExample:<UL TYPE=“square”><LI> List item one<LI> List item two<LI> List item three</UL>
  82. 82. Nested List
  83. 83. <IMG>• Used to display an image file into your web page.Attributes:SRC (source) = “filename” - Specifies the filename of the imageAlign - “left/center/right”Width – pixelsHeight – pixelsHSPACE – pixels - specifies the horizontal distance of the text beside the image
  84. 84. <IMG>VSPACE – pixels - specifies the vertical distance of the text above or below the image.Alt = “Text” - specifies the alternative text to be displayed if the images was not loaded.Border - displays a border around the image.Ex:<IMG SRC=“bha.jpg” alt=“bha”><IMG SRC=“bha.jpg” width=“100” height=“100”>
  85. 85. ANCHOR TAGS <A> Indicates an anchor for a piece of text or </A> image that serves as the origin of the hyperlink. Example: <A>Hot Spot</A>AttributesHREF (required) – the hyperlinks referenceValue: URL of the destination page. Example: <A HREF=“”>MSN</A>
  86. 86. Anchor TagsAdding links to other pagesThis a link to <a href="peter.html">Peters page</a>turn an image into a hypertext link<a href=“home.html"><img src="logo.gif" alt="home page"></a>
  87. 87. Tips in making a Website1. What is your website all about?2. Why are you creating your web site?3. Who is your audience?4. Draw a navigation diagram of your web site.
  88. 88. Tables• Tables are used for information as well as for layout.• Tables are used to display information in columns and rows.There are three t
  89. 89. •<EMBED> - tag is used to include video file in HTML document. Attributes: SRC – identifies the URL of the video file. HEIGHT & WIDTH – specifies the dimension in pixel values.
  90. 90. LOOP – determines the number of times the video file should be played Value: FALSE – plays the video file once TRUE – plays the video file infinitely
  91. 91. Flash movies (.swf), AVIs (.avi), andMOVs (.mov) file types are supported bythe embed tag..swf files - are the file types created by Macromedias Flash program..wmv files - are Microsofts Windows Media Video file types.
  92. 92. .mov files - are Apples Quick Time Movieformat..mpeg files - set the standard forcompression movie files created by theMoving Pictures Expert Group.The listings above are the most commonlyused formats for the internet. ".mpeg" files andMacromedias .swf files are the most compactand widely used among the internet. Stick toany of the file types above for use with yourweb pages.
  93. 93. •Used to gather information from visitors •Used with client –side language or server-side technology <form> - start of form </form> - end of form
  94. 94. Tables• Tables are used for information as well as for layout. <table border="1"> <tr><th>Year</th><th>Sales</th></tr> <tr><td>2000</td><td>$18M</td></tr> <tr><td>2001</td><td>$25M</td></tr> <tr><td>2002</td><td>$36M</td></tr> </table><table border="1" cellpadding="10"><table border="1" cellpadding="10" cellspacing="10"><table border="1" cellpadding="10" width="80%">
  95. 95. Create an HTML document containingPHYSICAL TAG as a title and will look like this. WORDSWords have power. Political leaders couldprovoke war or peace because of the words theyspoken to people. Words could feed the mindwith ideas that can make people act to certainthings.
  96. 96. Match the tags in column A with the effects of those tags found in column B. A B1. <I> </I> A. I. T BYTE2. <B> </B> B. HTML C. Bad Habits3. <SUB> </SUB> D. Stars4. <U> </U> HTML E.5. <I><S><B> </B></S></I> F. Love6. <SUP> </SUP> G. PGCHS7. <U><B> </U></B> H. ICT8. <B><I><SUB> </SUB></I></B> I. Stars9. <STRIKE> </STRIKE> J. In a Rush10. <TT> </TT>
  97. 97. ActivitiyCreate an HTML document containing your name Basic Tags as a title. Type the following for the body.Once you know the basic tags you are ready to start with HTML. Basic tags are the tags that should always be present in creating an HTML document. It serves as the foundation in creating a powerful website.
  98. 98. 1. It specifies the web address of a file stored on a computer connected to the Internet.2. A program that help you to view or navigate web pages in the internet.3. A large network of computers that are connected to each other by network cables.4. It is a protocol used in the communication between the browser and the web server.5. It tells the name of the owner of the site.6. It is a directory or folder connected to the web that contains a group of related web pages.