HTML Basic Training for beginners - Learn HTML coding
- 2. 1 Agenda Day 1 - Topics 1. Introduction to HTML ❖ Why HTML? ❖ Structure of HTML 2. Formatting Tags ❖ Basic Formatting Tags ❖ Setting Fonts 3. Lists and Links ❖ Unordered, Ordered and Definition List ❖ Links ❖ Mailto 4. Images ❖ Adding Images ❖ Hyper linking Images
- 3. 2 Introduction to HTML HTML is the language you use to create WebPages. Left to themselves, web browsers would take the text and images in your web pages and wrap them up into what looks like a single paragraph without any line breaks. With HTML, you act as an editor, marking up a page to indicate its format, telling the web browser where you want a new line to begin or how you want text or images aligned. In short HTML is all about specifying the structure and format of your Web page.
- 4. 3 What is markup language? The HTML includes a collection of markup elements and attributes that describe the letter’s contents: The <html> element defines the document as an HTML document. The <head> element creates a header section for the document, and the <title> element inside of it defines a document title that will be displayed in the browser’s title bar. The <body> element holds the actual text that will display in the browser window.
- 5. 4 Structure of HTML <HTML> <HEAD> <TITLE> Web Page number one! </TITLE> </HEAD> <BODY> Welcome to HTML </BODY> </HTML> Title is reflected here. Body is reflected here.
- 6. 5 Tags And Attributes Tags: Anything enclosed in angle brackets i.e. < and > are called tags. Example: <HTML> tag is used to indicate that this webpage is written in HTML. Every opening tag <HTML> should have an ending tag as well </HTML>. Collectively, a starting tag, an ending tag and everything between them make up an HTML element. Attributes: HTML tags tell web browsers how to format and organize web pages, but there’s more to tell i.e. you can customize most tags using attributes. An Attributes is a keyword that you use in an opening tag to give more information to the web browser. <TAGNAME ATTRIBUTE = VALUE>
- 8. 7 Basic Formatting Tags 1) Headings: There is a special tag for specifying headings in HTML. There are 6 levels of headings in HTML ranging from h1 for the most important, to h6 for the least important. Code for this would be : <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> OUTPUT
- 9. 8 2) Bold: You specify bold text with the <b> or <Strong> tag. Code: <b>This text is bold.</b> OR <Strong> This text is bold </strong> Output
- 10. 9 3) Italics: You specify italic text with the <i> tag or <em> tag. Code: <i>This text is italicized.</i> OR <em>This text is italicized using emphasize tag</em>
- 11. 10 3) Underline: You specify underline text with the <u> tag. Code: <u>This text needs importance.</u> Example: <u>This text needs importance.</u>
- 12. 11 4) Line Breaks You specify line break with the <br> tag. Code: <p>Here is a...<br />line break.</p>
- 13. 12 5) Horizontal Rule Code: Here's a horizontal rule... <hr size="2" color="#FF0000"/> ...that was a horizontal rule :)
- 14. 13 6) Center: This tag aligns the text in center Code: <Center> Welcome to HTML Basics </center>
- 15. 14 6) Paragraph: When you want to set paragraphs on our WebPages, use paragraph tag. Code: <p> Welcome to HTML Basics </p> <p> Introduction</p>
- 16. 15 7) Fonts: You use FONT tag to set text color, font face and size. Code: <Font face=“Verdana” color="maroon" size =4>If you notice, we have used attributes for the font tag. <em>Attributes</em> are nothing but properties added to the respective tags.</font>
- 17. 16 Aligning of Text: <p><Font face=“Verdana” color="maroon" size =4>If you notice, we have used attributes for the font tag. <em>Attributes</em> are nothing but properties added to the respective tags.</font></p> <p align="right">If you notice, we have used attributes for the font tag.</p> <p align="left">If you notice, we have used attributes for the font tag</p> <p align="center">If you notice, we have used attributes for the font tag</p>
- 18. Lists
- 19. 18 Creating lists: How would you display a list in a Web page? Simply by using ordered or unordered lists. ➢ Unordered list display a bullet in front of each list items. Tag: <UL> <LI></LI> </UL> ➢ Ordered list display the items in numerical or alphabetical terms. Tag : <OL> <LI></LI> </OL> ➢ Other type of list is Definition list, though not used much. Purpose: Organizes terms and their definitions in pairs. Tag: <DL> <DT>MBA</DT> <DD>Masters in Business Administration</DD> </DL>
- 20. 19 Code for Ordered list <Center>Basics of HTML</Center> <ol type="A"> (Other types 1, A, a, i, I) <li> Introduction to HTML</li> <li>Formatting Tags</li> <li>Lists and Links</li> <li>Images</li> </ol>
- 21. 20 Unordered List <Center>Basics of HTML</Center> <ul type="circle"> (other types are square, disc) <li> Introduction to HTML</li> <li>Formatting Tags</li> <li>Lists and Links</li> <li>Images</li> </ul>
- 22. 21 Definition List <DL> <DT>M.B.A</DT> <DD> Masters Of Business Administration</DD><br> <DT>HTML</DT> <DD> HyperText Markup Language</DD> </DL>
- 23. Adding Images and Links
- 24. 23 Creation of Links: Links, otherwise known as hyperlinks, are defined using the <a> tag - otherwise known as the anchor element. To create a hyperlink, you use the a tag in conjunction with the href attribute (href stands for Hypertext Reference). The value of the href attribute is the URL, or, location of where the link is pointing to. Types of links: 1) External Links: Links which take us to another webpage/site. 2) Internal Links: Links which take us to a particular section within a webpage/website. 3) Graphical Links: Images which are linked instead of text (will be covered in next topic). Hypertext references can use absolute URLS, relative URLs: Absolute :This refers to a URL where the full path is provided. Relative: This refers to a URL where only the path, relative to the current location, is provided.
- 25. 24 External Links: Code: Visit the <a href ="https://deloittenet.deloitte.com/PC/PracticeComm/Industries/ CIP/PIP/Pages/home.aspx"> Process & Industrial Products Site</a>
- 26. 25 Internal Links: 1. Identify and mark the places in your document that you want to link to. For example, mark the top of your page or its major headings. 2. Link to those spots. When you create a link from one Web page to another, you use URLs to define the location of the page you want to link to. However, URLs apply to a whole page, not segments of a page. If you want to direct your links to a specific place on the page, you first have to mark the spot you want to link to. You use the anchor element with the name attribute to make your mark: <a name="top"></a> Notice that there isn't any text between the opening and closing tags. That's because an anchor tag that marks a spot doesn't need text to hang the spot on. Instead, you simply create an empty anchor tag and you've created a spot in your document that you can link to. To link to this spot, you use a slightly different URL than you've seen before: <a href="#top">Back to top</a> The pound sign (#) indicates that you're pointing to a spot on the page, rather than another page.
- 27. 26 Place a named anchor tag here i.e. <a name="TOP"></a> (We have identified the spot) Add a hyperlink here in order to click and go to the top of the page <a href="#TOP">Back to Top</a>
- 28. 27 Mailto Links: You can specify subject line and also add users in the cc and bcc fields. Code: <a href="mailto:<email id>? cc=mailto:<email id>& bcc=mailto:<email id>& subject=summer party& body=you are invited to a big summer party!"> Send Mail </a>
- 29. 28 Adding Images to a Webpage: Images are stored in files outside your WebPages, which means you will need to upload them to your Internet Service Provider as files separate from your WebPages. Tag: <IMG> <body> <center> <h3> Working with images</h3> <img src=“url" alt="HTML" width =252 height=252 /> </center> </body>
- 30. 29 Graphical Link: You can also add a link to an image. Code: <body> <center> <h3> Hyper linking an image</h3> <a href= "http://www.google.co.in/"> <img src="../images.jpg" alt="HTML" width =152 height=100/></a> </center> </body>