Introduction to HTML * HTML is a markup language that web browsers use to interpret and compose text, images and other material into visual or audible web pages * HTML is Hyper Text Markup Language. * HTML is easy to learn. * It is a language to create web pages. * HTML is not a programming language, which means it has no decision control. HTML has markup tags to define elements of page and structure of the page. * HTML markup tags are usually called HTML tags * You can design a static web page with the help of HTML * You need to install any text editor (like note pad) to write HTML code and any web browser (like chrome) to run the code. * HTML files are saved with the extension .html * HTML is case insensitive language * HTML is developed by World Wide Web Consortium * Currently using HTML 5 * To learn HTML you need no programming background. * You need to open note pad, open a new file and write HTML code in it Save it with html extension Execute it with some browser You can reopen HTML file with notepad to make any edition HTML Elements * An HTML element is an individual component of an HTML document * It starts with a start tag / opening tag and ends with an end tag / closing tag * The element content is everything between the start and the end tag * Most HTML elements can have attributes For example * <p> This is a paragraph </p> * Here, <p> is starting tag and </p> is closing tag. Everything between them is paragraph content to be displayed on browser Document Structure Elements * <html> * <head> * <body> <html> * The Root element of an HTML document; all other elements are contained in this * The HTML element delimits the beginning and the end of an HTML document. <head> * Container for processing information and metadata for an HTML document <body> * Container for the displayable content of an HTML document. HTML document format <html> <head> Place processing information and metadata here </head> <body> Place displayable content here </body> </html> Comments <!-- Write your comment here --> Title Tag * It is written in <head> tag * The <title> tag defines the title of the document * It defines a title in the browser toolbar * It provides a title for the page when it is added to favorites * It displays a title for the page in search-engine results Example <html> <head> <title> Welcome </title> </head> <body> </body> </html> Heading Tags Headings are defined with the <h1> to <h6> tags <h1> defines the most important heading. <h6> defines the least important heading Search engines use your headings to index the structure and content of your web pages Example <html> <head> <title> Welcome </title> </head> <body> <h1> Heading 1 </h1> <h2> Heading 2 </h2> <h3> Heading 3 </h3> <h4> Heading 4 </h4> <h5> Heading 5 </h5> <h6> Heading 6 </h6> </body> </html> Paragraph Tag Paragraphs are defined with the <p> tag Browsers automatically add an empty line before and after a paragraph. Example <html> <head> <title> Welcome </title> </head> <body> <h1> Paragraphs </h1> <p> This is the first paragraph of your web page</p> <p> This is the second paragraph of your web page</p> <p> This is the third paragraph of your web page </p> </body> </html> Formatting Tags * Use the <br /> tag if you want a line break (a new line) without starting a new paragraph: * The <br /> element is an empty HTML element. * It has no end tag. * The <hr /> tag creates a horizontal line in an HTML page. * The <hr/> element can be used to separate content. Image Tag * Images are defined with the <img> tag. General Syntax: <img src=“path to the image”> Example: <img src=“nature.jpg”> * The <img> tag is empty, which means that it contains attributes only, and has no closing tag. * To display an image on a page, you need to use the src attribute. src stands for "source". The value of the src attribute is the URL of the image you want to display. Attributes of image tag * Src = some url for image * Alt = alternative text * Width = pixel or percentage * Height = pixel or percentage * Align = top, bottom, middle, left, right The default alignment is bottom i.e. the text surrounding the image will appear at bottom of the image. * Border = The border attribute places a border around the image. Value is in pixel Examples: <img src="image1.jpg" width="200" height="150"> <img src="image2.jpg" alt="demo"> <img src="image3.jpg" border="1"> List Tag: Lists are used to group related pieces of information together, so they are clearly associated with each other and easy to read. There are two types of List Unordered List—used to group a set of related items, in no particular order. Ordered List—used to group a set of related items, in a specific order. * An unordered list starts with the <ul> tag. * Each list item starts with the <li> tag. * The list items are marked with bullets (typically small black circles). Example <html> <head> </head> <body> <ul> <li>C </li> <li>C++</li> <li>PHP</li> </ul> </body> </html> Attribute type By default Unordered lists appear with bullets. But if required then we can change this symbol to "square" or "circle". Attribute type has following values square disc circle Example <html> <head> </head> <body> <ul type=”square”> <li>C </li> <li>C++</li> <li>PHP</li> </ul> </body> </html> Ordered List Ordered lists, or numbered lists, are used to display a list of items that need to be placed in a specific order. The <ol> tag is used to create an ordered list. The list can be numerical or alphabetical. Example <html> <head> </head> <body> <ol> <li>C </li> <li>C++</li> <li>PHP</li> </ol> </body> </html> Attribute type By default Ordered lists appear with numbers. But if required then we can change numbers to letters or roman numerals To do this we need to handle “type” attribute of <ol> tag. Attribute type has following values 1 A I a i Example <html> <head> </head> <body> <ol type=”a”> <li>C </li> <li>C++</li> <li>PHP</li> </ol> </body> </html> Anchor Tag A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document. Links are specified in HTML using the <a> tag. <a href="url">Link text</a> Example <html> <head> <title>anchor example</title> </head> <body> <a href="example1.html">Click Here</a> </body> </html><<Prev Home Next>>
Saturday, July 1, 2017
Introduction to HTML
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment