Easy Learning with HTML What is HTML? HTML stands for Hyper Text Markup Language HTML is the standard markup language for creating Web pages HTML describes the structure of a Web page HTML consists of a series of elements HTML elements tell the browser how to display the content HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc. Why we use html language ….? It is language we use to build the structure of web page but it Is not programming language but scripting language Notes Html it is not case sensitive language we can write <HTML> capital OR <html> small To write html language we use software program called text editor examples of text editor 1-notepad 2-wordpad 3-notepad++ …………..etc To run this code we write inside notebad or any text editor we run it through any browser like as google chrome ,edge ,firefox ,,, To learn html you shoud know how to write Html tags that are used for creating web page Any thing we write inside the text editor(notepad) or any thing we delete from the notepad we shoud do save from file or click on button (ctrl+S) in keyboard ================================================== HTML TAGS The first tag we use in texteditor called <html> To tell browser which language we use We have two type of tags 1-container tags :any tag have opening tag like that <html> and closing tag like that </html> 2-empty tags: these tags have only an opening tag like <img> <br> HTML ELEMENT What we meaning of html element ? The content we write between opening tag and closing tag Like that <h1>This is a Heading</h1> <p>This is a paragraph</p> This text called html element We can write tags inside there Others HTML Attributes All HTML elements can have attributes Attributes provide additional information about elements Attributes are always specified in the start tag Attributes usually come in name/value pairs like: name="value" Example The src Attribute The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed: <img src="img_girl.jpg"> The width and height Attributes The <img> tag should also contain the width and height attributes, which specify the width and height of the image (in pixels): Example <img src="img_girl.jpg" width="500" height="600"> The structure of html document First we will take tag <html> This called root element this contains the html tags inside it so we called it container tag we use it to detect the document as html document Second we take tag <head > This tag contain information about the document Or information about the the web site we want to visit it Inside <head> We can have other tags like <title> here we write the title of websit we want</title> Third we take tag<body> This tag <body>come after head tag we use <body> tag to display any thing we want to apper in web page like text,imag,links, <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> Some important attribute for body Text: to specifies the color of text Bgcolor: to specifies the color of background for web page <html> <head> <title>Page Title</title> </head> <body text=”red” bgcolor=”pink”>> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> Some important notes while writing a html code 1.Shoudn’t be any space between letters of the tags like that < ht ml> incorrect 2.Attribute name not case sensitive HTML Headings HTML headings are titles or subtitles that you want to display on a webpage.display text bigger and bolder than normal body text we have six levels of headings For example HTML Paragraphs A paragraph always starts on a new line, and is usually a block of text. The HTML <p> element defines a paragraph. A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph. Attribute of <p> tag Aling If we want <p> be center or right or left we give it this attribute Example: If we want to do lines break we use <br> tag HTML Text Formatting HTML contains several elements for defining text with a special meaning HTML Formatting Tags Formatting elements were designed to display special types of text: <b> - Bold text <strong> - Important text like <b> to make text bold <i> - Italic text <em> - Emphasized text like <i> tag The content inside is typically displayed in italic <mark> - Marked text or highlighted <del> - Deleted text like <strike> tag <sub> - Subscript text <sup> - Superscript text <center>-display text in center HTML <mark> Element HTML <del> Element HTML <sup> Element HTML <sub> Element Horizontal tag <hr> to create horizontal line in html or to make seperate between content <hr> tag have many attributes Size=”2” Color=”red” Width=”12” Align=”center” Example Inserting images imag image attribute 1. Src:specifies the location or url of the image to display 2. Alt: if the browser can’t display image the text in alt attribute will appear 3. Align: if we want image appear in center or right or left 4. Height: to give image height 5. Width:to give image width 6. Border: it is numeric value to put border around image Good luck
