Introduction to HTML4
Download as PPTX, PDF0 likes470 views
The document serves as an introduction to HTML4, detailing its standards and basic tags like headings, paragraphs, and styles. It includes examples of various HTML elements, such as iframes, lists, and links, to guide users in web page design. It emphasizes the importance of compliance with HTML4 standards for optimal browser compatibility and user accessibility.
Introduction to HTML4
- 1. Introduction to HTML4 www.collaborationtech.co.in Bengaluru INDIA Presentation By Ramananda M.S Rao
- 2. Content Content Introduction Basic Tags Of HTML Texts & Font Layouts and styles Scroll and Lists Form Elements and form Design Tables and Special Tables Option Groups Complex Screen Design Field Sets, Meta Tags Email Links Image Links and using map, Embed Multimedia Using frames iframes and Noframes Advanced Frame Options About Us DD www.collaborationtech.co.in
- 3. Introduction HTML4 is the latest standard released by the World Wide Web consortium (www.w3.org) for web pages. Making sure that your pages comply with standards like HTML4 will allow your site to be viewed by the maximum number of visitors. Since HTML4 was published, browsers have moved on and support for HTML4 is becoming much more consistent between updated browsers. www.collaborationtech.co.in
- 4. HTML Basic Tags Heading Tags Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. <!DOCTYPE html> <html> <head> <title>Heading Example</title> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html> www.collaborationtech.co.in
- 5. HTML Basic Tags Paragraph Tag The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p> and a closing </p> tag. <!DOCTYPE html> <html> <head> <title>Paragraph Example</title> </head> <body> <p>Welcome to Collaboration Technologies</p> <p>Welcome to Collaboration Technologies</p> </body> </html> Line Break Tag: <!DOCTYPE html> <html> <head> <title>Line Break Example</title> </head> <body> <p>Hello<br /> You delivered your assignment ontime.<br /> Thanks<br /> Mahnaz</p> </body> </html> www.collaborationtech.co.in
- 6. HTML Basic Tags Centering Content You can use <center> </center>tag to put any content in the center of the page or any table cell. Horizontal Lines The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly. Nonbreaking Spaces you should use a nonbreaking space entity instead of a normal space. www.collaborationtech.co.in
- 7. Applying Styles <html> <head> <style> body { height: 100%; background: black; background-image: url('images/Sunset.jpg'); background-repeat: no-repeat; font-family: sans-serif; color: #051a00; } </style> </head> <body> <p> hello world </p> </body> </html> www.collaborationtech.co.in
- 8. Applying Styles Using Select Options <label>Job Position Required</label> <select name="job"> <option>Select <option>Manager <option>Programmer <option>Assistant </select> Using List <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> Using Anchor and Image Tags <a href=“demo.html” target=“_self”>Click Me</a> <img src=“images/sunset.png” width=“100px” height=“100px”> www.collaborationtech.co.in
- 9. iframe <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example of HTML Iframe</title> </head> <body> <iframe src="demo.html" width="300" height="200"> alternative content for browsers which do not support iframe. </iframe> </body> </html> www.collaborationtech.co.in
- 10. iframe demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example of HTML Iframe</title> </head> <body> <h1>Welcome to Collaboration Technologies </h1> <p>Collaboration Technologies is a software development, technology and consultancy centre. We are dedicated to deliver good quality services in software development and consultancy. We have an expertise in training to improve the quality of work at all levels in an organization.</p> </body> </html> www.collaborationtech.co.in
- 11. Follow us on Social Facebook: https://www.facebook.com/collaborationtechnologies/ Twitter : https://twitter.com/collaboration09 Google Plus : https://plus.google.com/100704494006819853579 LinkedIn : https://www.linkedin.com/in/ramananda-rao-a2012545 Instagram : https://instagram.com/collaborationtechnologies YouTube : https://www.youtube.com/channel/UCm9nK56LRbWSqcYWbzs8CUg Skype : facebook:ramananda.rao.7 WhatsApp : +91 9886272445 www.collaborationtech.co.in THANK YOU
- 12. About Us