Lab 3 Html basics
Agenda What is HTML. HTML structure. HTML meta tags. Placing links for navigations Web Page validating through W3C.
What IS HTML ?? HTML is the "mother tongue" of your browser. HTML is a language, which makes it possible to present information (e.g. scientific research) on the Internet. What you see when you view a page on the Internet is your browser's interpretation of HTML. To see the HTML code of a page on the Internet, simply click "View" in the top menu of your browser and choose "Source".
What IS HTML ?? What does it meant by tags ??!! When a browser opens an HTML file, the browser will look for HTML codes in the text and use them to change the layout, insert images, or create links to other pages. Since HTML documents are just text files they can be written in even the simplest text editor. HTML is not a programming language, it is a markup language. A markup language is a set of markup tags, HTML uses markup tags to describe web pages. What does it meant by tags ??!!
What is ….HTML Tags ?!! Tags is something like : < body> It is number of keywords surrounded by greater than and less than brackets < >, that’s make it descriptive language. This keyword is doing it’s own mission. Tags are used to describe words that come after it. Some tags need a description for it’s mission, that’s is called attribute for that tag. It’s placed after the tag name and before close the tag with it’s brackets. Ex : <body bgcolor=“red” >
HTML Basic Structure
HTML Basic Structure Consider the following simple static web page
HTML Basic Structure Head Body All normal Web Pages consist of a head and a body. The head is used for text and tags that do not show directly on the page. The body is used for text and tags that are shown directly on the page.
HTML Basic Structure . The most basic code - the code you will use for any page you make, is shown below <html> <head> <!-- This section is for the title and technical info of the page. --> </head> <body> <!-- This section is for all that you want to show on the page. --> </body> </html>
HTML Basic Tags <HTML> ……. </HTML> Tag . The basic tag that tell the editor it is a beginning of an HTML file. The whole code for programming the page must included inside these tag. <head> ….. </head> tag. Information between these two tags is not visible on your page. You can call external files here. <body> …… </body> Page contents you wants to appear directly is written here
HTML Basic Structure All the page content Appeared here Is written in <body> …. </body>
HTML Tags
HTML Basic Tags <center> <H1> WELCOME TO THEBES ACADMEY <body> <center> <H1> WELCOME TO THEBES ACADMEY </H1> <img src = “banner.jpg” > <HR/> AVAILABLE INSTITUTIONS </center>
HTML Headings HTML headings are defined with the <h1> to <h6> tags. <h1>This is a heading</h1> <h2>This is a heading smaller than h1</h2> <h3>This is a heading smaller than h2</h3> …………
HTML Paragraphs HTML paragraphs are defined with the <p> tag. <p>This is a paragraph</p> <p>This is another paragraph</p> <center> …< /center> For putting text, images or any other contents in the center of the page. During CSS styling it could be written is different way.
HTML Images HTML images are defined with the <img> tag. <img src="C:\Users\pc\Desktop\HTML tutorials\bue_logo.jpg" width="104" height="142" />
HTML Hyper Links HTML links are defined with the <a> tag. <body> <a href = “page2.html” > Higher Institution for computer and information system </a> <a href = “page3.html> Higher institution for engineering <a> </body>
HTML Hyper Links By clicking on institution of computer and information system the following page are called
Other HTML Tags HTML Line Breaks HTML basic formatting <p><b>This text is bold</b></p> <p><i>This text is italic</i></p> <p><code>This is computer output</code></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> This is<br />a para<br />graph with line breaks This text is bold This text is italic This is computer output This is subscript and superscript
Other HTML Tags <h1 style="text-align:center"> HTML styles Background Color Font Family, Color and Size Text Alignment <body style="background-color:yellow"> <p style="font-family:courier new; color:red; font-size:20px"> <h1 style="text-align:center">
Discover these Tags <u>...</u> , <i>...</i> and <b>...</b> <big> …. </big>, <small> ….. </small> <strong> ….. </strong>, <strike>...</strike> <div> … </div> , <span> … </span> <em> ….. </em> <code> ….. </code>, <address> …. </address>
Meta Tags Meta tags are used to store information usually relevant to browsers and search engines For example, some search engines look to meta tags for descriptions, keywords. DESCRIPTION meta tag: <meta name="DESCRIPTION" content="AN HTML Tutorial"> KEYWORDS <meta name="Keywords" content="first, second, third"> Author: <meta name="Author" content="Author Information"> Copy right: <meta name="Copyright" content="Copyright Statement">