Presentation 3: Basic HTML & XHTML Fundamentals of Web-Centric Development.
Presentation on HTML
-
Upload
satvirsandhu9 -
Category
Education
-
view
127 -
download
0
Transcript of Presentation on HTML
![Page 1: Presentation on HTML](https://reader035.fdocuments.in/reader035/viewer/2022062523/58eb53db1a28ab395a8b46f5/html5/thumbnails/1.jpg)
HTML (Hypertext Markup HTML (Hypertext Markup Language)Language)
Language of Web PageLanguage of Web Page
Presented By: Macrosys, Moga
![Page 2: Presentation on HTML](https://reader035.fdocuments.in/reader035/viewer/2022062523/58eb53db1a28ab395a8b46f5/html5/thumbnails/2.jpg)
Hypertext & HyperlinkHypertext & HyperlinkEnglish -> Written -> Books HTML -> Written -> Web page Hyper Text Markup
LanguageWeb pages are text files.The key to hypertext is the use
of hyperlinks, which allow you to jump from one topic to another topic.
![Page 3: Presentation on HTML](https://reader035.fdocuments.in/reader035/viewer/2022062523/58eb53db1a28ab395a8b46f5/html5/thumbnails/3.jpg)
Definition of HTMLDefinition of HTMLHTML describes the contentcontent and
formatformat of web pages using tags. Ex. Title Tag: <title>A title </title>
It’s the job of the web browser to interpret tags and display the content accordingly.
![Page 4: Presentation on HTML](https://reader035.fdocuments.in/reader035/viewer/2022062523/58eb53db1a28ab395a8b46f5/html5/thumbnails/4.jpg)
HTML Syntax HTML Syntax An HTML file contains both
formattingformatting tagstags and contentcontentDocument content is what we
see on the webpage. Tags are the HTML codes that
control the appearance of the document content.
![Page 5: Presentation on HTML](https://reader035.fdocuments.in/reader035/viewer/2022062523/58eb53db1a28ab395a8b46f5/html5/thumbnails/5.jpg)
HTML SyntaxHTML SyntaxHTML syntax: two-sided tag:<tag attributes>document content</tag>
Starting tag
of the tags
tag. Optional!
Actual content appears in webpage. It could be empty
Closing tag
Examples: <p> This is a paragraph</p>
<body bgcolor = “yellow”> Color Text </body>
![Page 6: Presentation on HTML](https://reader035.fdocuments.in/reader035/viewer/2022062523/58eb53db1a28ab395a8b46f5/html5/thumbnails/6.jpg)
HTML SyntaxHTML SyntaxHTML syntax:
one-sided tag:<tag />
e.g. Breaking line tag: <br/> Horizontal line tag: <hr/>
![Page 7: Presentation on HTML](https://reader035.fdocuments.in/reader035/viewer/2022062523/58eb53db1a28ab395a8b46f5/html5/thumbnails/7.jpg)
Structure of the Web PageStructure of the Web PageStarting with the tag
<html>...</html>
<html> .......
</html>
Everything about the web page should be enclosed here
![Page 8: Presentation on HTML](https://reader035.fdocuments.in/reader035/viewer/2022062523/58eb53db1a28ab395a8b46f5/html5/thumbnails/8.jpg)
Structure of the Web PageStructure of the Web PageInside the <html></html> tag
◦ Each web page has a headhead part described in <head></head> tag:
<html> <head>
<title> Testing Page</title> </head> </html>
The title of the web page should be put here
![Page 9: Presentation on HTML](https://reader035.fdocuments.in/reader035/viewer/2022062523/58eb53db1a28ab395a8b46f5/html5/thumbnails/9.jpg)
Structure of the web pageStructure of the web page Inside the <html></html> tag
◦ Each web page has a bodybody part described in <body></body> tag:
<html> <head> <title> Testing Page</title> </head> <body>
This is a sample HTML file. </body>
</html>
The content of the whole web page should be put here
![Page 10: Presentation on HTML](https://reader035.fdocuments.in/reader035/viewer/2022062523/58eb53db1a28ab395a8b46f5/html5/thumbnails/10.jpg)
Title
Body
![Page 11: Presentation on HTML](https://reader035.fdocuments.in/reader035/viewer/2022062523/58eb53db1a28ab395a8b46f5/html5/thumbnails/11.jpg)
Create a basic HTML fileCreate a basic HTML fileOpen your text editor (notepadnotepad).Type the following lines of code into the
document:<html><head><title> Testing Page</title></head><body>This is a sample HTML file.</body></html>
![Page 12: Presentation on HTML](https://reader035.fdocuments.in/reader035/viewer/2022062523/58eb53db1a28ab395a8b46f5/html5/thumbnails/12.jpg)
![Page 13: Presentation on HTML](https://reader035.fdocuments.in/reader035/viewer/2022062523/58eb53db1a28ab395a8b46f5/html5/thumbnails/13.jpg)
sample.html
![Page 14: Presentation on HTML](https://reader035.fdocuments.in/reader035/viewer/2022062523/58eb53db1a28ab395a8b46f5/html5/thumbnails/14.jpg)
Introduction to some common Introduction to some common tagstagsParagraph tagList tagHyperlink tags
![Page 15: Presentation on HTML](https://reader035.fdocuments.in/reader035/viewer/2022062523/58eb53db1a28ab395a8b46f5/html5/thumbnails/15.jpg)
Paragraph tags Paragraph tags <p>...</p><p>...</p><html><head><title> Testing Web Page</title></head>
<body><p> Here is the first paragraph. </p><p> Here is the second paragraph.
</p></body>
</html>
![Page 16: Presentation on HTML](https://reader035.fdocuments.in/reader035/viewer/2022062523/58eb53db1a28ab395a8b46f5/html5/thumbnails/16.jpg)
Space between paragraphs
First paragraph
Second paragraph
![Page 17: Presentation on HTML](https://reader035.fdocuments.in/reader035/viewer/2022062523/58eb53db1a28ab395a8b46f5/html5/thumbnails/17.jpg)
List tagsList tagsOrdered list: used to display information in a
numeric order. The syntax for creating an ordered list is: <ol > e.g. <ol ><li>item1 </li> <li> Name: Satvir Sandhu</li><li>item2 </li> <li> Software Dept.</li>… <li> Instructor: Satvir </li></ol> </ol>
Result:
![Page 18: Presentation on HTML](https://reader035.fdocuments.in/reader035/viewer/2022062523/58eb53db1a28ab395a8b46f5/html5/thumbnails/18.jpg)
List tagsList tagsUnordered list: list items are not listed in a particular order. The syntax is:<ul > e.g. <ul><li>item1 </li> <li> Name: Satvir Sandhu</li><li>item2 </li> <li> Software Dept. </li>… <li> Instructor: Satvir </li></ul> </ul>
Result
![Page 19: Presentation on HTML](https://reader035.fdocuments.in/reader035/viewer/2022062523/58eb53db1a28ab395a8b46f5/html5/thumbnails/19.jpg)
Include a PictureInclude a Picture<img src=“FILENAME” /><img src=“FILENAME” alt=“text”
/>E.g.<img src=“logo.gif” alt=“Google
logo” /><img src=“logo.gif” />