Html for beginners part I
Download as PPT, PDF•1 like•1,489 views
The document serves as an introduction to HTML, outlining its purpose as the language used for developing web pages. It covers the structure of an HTML document, types of tags (paired and singular), and includes examples of common HTML elements such as paragraphs, lists, links, and images. Additionally, it emphasizes the importance of required tags and provides basic templates for HTML documents.
Html for beginners part I
- 1. Introduction to HTML Visit this blog for more information: otaleem.blogspot.com
- 2. Topics HTML What is HTML Parts of an HTML Document HTML Tags
- 3. Hyper Text Markup Language The language that is used to develop web pages is called Hyper Text Markup Language (HTML). HTML is the language interpreted by the Browser. Web pages are also called HTML document. HTML is a set of special code that can be embedded in text to add formatting and linking information. HTML is specified as Tags in an HTML document.
- 4. HTML Used to create a Web page Made up of tags that specify the structure of the document (this section is a heading, this section is a paragraph, etc..) An extract from a sample HTML document: <html> <head> <title> Web page</title> </head> <body> <h1>This is my first Web page</h1>
- 5. HTML Tags Tags are instructions that are embedded directly into text of the document . An HTML tag is a signal to a Browser that it should do something. By convention all HTML tags begin with an open angle bracket (<) and end with a close angle bracket (>). HTML tags can be of two types Paired Tags Singular Tags
- 6. Paired Tags A tag is said to be a pair tag if it along with a companion tag .For example the <B> tag is a paired tag . The <B> tag with its companion tag </B> causes the text contained between them to be Bold. The effect of the paired tag is applied only to the text they contain. In paired tags , the first tag (<B>) is called opening tag and the second tag (</B>) is called closing tag.
- 7. Singular Tags The second type of the tag is the Singular or Stand-alone tag. A stand-alone tag does not have a companion tag. For example <BR> tag will insert a line break . This tag does not require companion tag.
- 8. HTML Tags Most HTML tags work in pairs. There is an opening and a closing tag. For example: <p>Some content here.</p> The <p>…</p> tag displays a paragraph <p> opens the paragraph (opening tag) </p> closes the paragraph (closing tag) “Some content here.” will be displayed on the page
- 9. Self-closing/Singular Tags Some HTML tags are self closing. For example: <br> The <br> tag will display a line break.
- 10. Required Tags All HTML documents should have html, head and body tags. <html>…</html> -- Surrounds the contents of the entire page <head>…</head> -- Lists the identification information on the page, such as the title <title>…</title> -- Gives the name of the page that appears in the top of the browser window <body>…</body> -- Frames the content of the page to be displayed in the browser
- 11. Basic HTML Template <html> <head> <title>CMSC104 HTML Template</title> </head> <body> This is just a basic HTML template to be used in CMSC104. </body> </html> Example file: template.html
- 13. Attributes The body tag takes the following attributes. BGCOLOR BACKGROUND TEXT ( To change the body text color)
- 14. TITLES AND FOOTERS Title: A web page could have a title that describes what the page is about . <Title> tag is used for this purpose. Text written b/w <Title> </Title> shows up in the title bar of browser window.
- 15. Some Common HTML Tags and Their Meanings <p>…</p> -- Creates a paragraph <br /> -- Adds a line break <hr /> -- Separates sections with a horizontal rule <h1>…</h1> -- Displays a heading (h1-h6) <!--…--> -- Inserts a comment <ol>…</ol> -- Creates an ordered list <ul>…</ul> -- Creates an unordered list <img /> -- Inserts an image into the document <a>…</a> -- Inserts a link into the document
- 16. Paragraph Example <p> The exam next week will consist of T/F, multiple choice, short answer and pseudocode questions. You cannot use a calculator. </p> <p> After the exam, we will learn JavaScript. </p>
- 18. Line Break Example <p> Roses are Red. <br /> Violets are Blue. <br /> You should study for Exam 1. <br /> It will be good for you! </p>
- 20. Horizontal Rule Example <p> The exam next week will consist of T/F, multiple choice, short answer and pseudocode questions. You cannot use a calculator. </p> <hr /> <p> After the exam, we will learn JavaScript. It should be fun!! </p>
- 22. Heading Example <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>
- 24. Comment Example <!-- This is just some sample html to illustrate the use of a comment --> <p> Here is my paragraph. </p> <!-- Here is another comment -->
- 26. HTML – Lists Why lists are important: • They are widely used on links pages • They help in the organization of data • They are quick and easy to create
- 27. Order Lists (Numbering) An order list start with the tags <OL> and ends with </OL>. Each list item starts with the tag <LI>. Attributes can be specified with <LI> tags.
- 28. Example There are different types of Input devices <oL Type =“1” Start=3> <LI> Mouse <LI>Keyboard <LI> Joystick </OL>
- 29. Ordered List Example <ol> <li>Print Review Questions for Exam1.</li> <li>Work on Review Questions for Exam1.</li> </ol>
- 31. Unordered Lists An unordered list starts with <UL> tags and end with </UL> Each list item tag start with <LI> tag. Attribute specified with <UL> tag is Type: Specify the type of the bullet. It can be FILL ROUND Or SQUARE.
- 32. Unordered List Example <ul> <li>country music</li> <li>monday mornings</li> <li>brussels sprouts</li> </ul>
- 34. Link Example <a href="http://www.cs.umbc.edu/104/">CMSC104 Main page</a>
- 35. Link Screenshot
- 36. Adding Graphics To HTML HTML allows to add static or animated images to an HTML Page. HTML accepts pictures file formats i.e. .gif and .jpg /. jpeg. <IMG> tag is used to add the images. This tag takes the image file as an attribute.
- 37. Image Example <img src="linux-tux.png" alt="Tux the Penguin" />
- 38. Image Screenshot
- 39. Visit this blog for more information: otaleem.blogspot.com
Editor's Notes
- #2: This slide have two parts seconds part is in description.