HTML introduction for beginners Slides .pptx
- 1. HTML
- 2. span and div • Both the tags (<div> and <span>) are used to represent the part of the web page, <div> tag is used an as block part of the webpage, and <span> tag is used as an inline part of the webpage. • HTML <div> tag: The div tag is known as Division tag. The div tag is used in HTML to make divisions of content on the web page like (text, images, header, footer, navigation bar, etc). Div tag has both openings (<div>) and closing (</div>) tags and it is mandatory to close the tag. As we know Div tag is a block-level tag. In this example, the div tag contains the entire width. It will be displayed a div tag each time on a new line, not on the same line. • HTML <span> tag: The HTML span element is a generic inline container for inline elements and content. It used to group elements for styling purposes (by using the class or id attributes). A better way to use it when no other semantic element is available. The span tag is very similar to the div tag, but div is a block-level tag and span is an inline tag.
- 3. HTML Emojis • Emojis are letters (characters) from the UTF-8 (Unicode) character set. The <meta charset=”UTF-8″> element in HTML defines the character set. Many UTF-8 characters cannot be typed on a keyboard, but they can always be displayed using numbers (called entity numbers). To let the browser understand that you are displaying a character, you must start the entity number with &# and end it with ; (semicolon).
- 4. HTML Entities • HTML provides some method to display reserved characters. Reserved characters are those characters that are either reserved for HTML or those which are not present in the basic keyboard. For instance, ‘<‘ is reserved in HTML language. Sometimes this character needs to display on the web page which creates ambiguity in code. Along with these are the characters which are normally not present in basic keyboard ( £, ¥, €, © ), etc. HTML provides some Entity names and Entity numbers to use these symbols. Entity names are case-sensitive. Entity number is easy to learn.
- 5. HTML File Paths • A file path specifies the location of a file inside a web folder structure. It’s like an address of a file that helps the web browser to access the files. File paths are used to link external resources such as images, videos, style sheets, JavaScript, displaying other web pages etc. To insert a file on a web page its source must be known. For example, the syntax (<img src=” ” alt=” “>) is used to insert an image file where the path of the file is mentioned in the source (src). • File paths are of two types: • Absolute File Paths • Relative File Paths • Absolute File Paths: It describes the full address(URL) to access an internet file. • <img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain"> • Relative File Path: It describes the path of the file relative to the location of the current web page file. • <img src="img_5terre.jpg" alt="Mountain">
- 6. HTML Forms • <form> is a HTML element to collect input data with containing interactive controls. • It provides facilities to input text, number, values, email, password, and control fields such as checkboxes, radio buttons, submits buttons, etc. in other words, form is a container that contains input elements, like text, email, number, radio buttons, checkboxes, submit buttons, etc. • Forms are generally used when you want to collect data from the user. For example, a user wants to buy a bag online, so he/she has to first enter their shipping address in the address form and then add their payment detail in the payment form to place an order. • Forms are created by placing input fields within paragraphs, preformatted text, lists, and tables. This gives considerable flexibility in designing the layout of forms.
- 7. Form Elements These are the following HTML <form> elements: • <label>: It defines label for <form> elements. • <input>: It is used to get input data from the form in various type such as text, password, email, etc by changing it’s type. • <button>: It defines a clickable button to control other elements or execute a functionality. • <select>: It is used to create a drop-down list. • <textarea>: It is used to get input long text content. • <fieldset>: It is used to draws a box around other form elements and group the related data. • <legend>: It defines caption for fieldset elements. • <datalist>: It is used to specify pre-defined list options for input controls. • <output>: It display the output of performed calculations. • <option>: It is used to define option in drop-down list. • <optgroup>: It used to defines group related options in a drop down list.
- 8. HTML Video Tag Before HTML 5 came into existence, videos could only be played in a browser using a plugin like flash. But after the release of HTML 5, adding a video to a webpage is as easy as adding an image. The HTML5 “video” element specifies a standard way to embed a video on a web page. Syntax : <video src="“ controls> </video> Attributes that can be used with the “video” tag are listed below : 1. Autoplay: It tells the browser to immediately start downloading the video and play it as soon as it can. 2. Preload: It intends to provide a hint to the browser about what the author thinks will lead to the best user experience. 3. Loop: It tells the browser to automatically loop the video. 4. height: It sets the height of the video in CSS pixels. 5. width: It sets the width of the video in CSS pixels. 6. Controls: It shows the default video controls like play, pause, volume, etc. 7. Muted: It mutes the audio from the video. 8. Poster: It loads an image to preview before the loading of the video. 9. src: It is used to specify the URL of the video file.
- 9. HTML Audio Tag • Since the release of HTML5, audios can be added to webpages using the “audio” tag. Previously audios could be only played on webpages using web plugins like Flash. The “audio” tag is an inline element that is used to embed sound files into a web page. It is a useful tag if you want to add audio such as songs, interviews, etc on your webpage. • Syntax : <audio> <source src="sample.mp3" type="audio/mpeg"> </audio> • Attributes: The various attributes that can be used with the “audio” tag are listed below: • Controls: Designates what controls to display with the audio player. • Autoplay: Designates that the audio file will play immediately after it loads controls. • Loop: Designates that the audio file should continuously repeat. • src: Designates the URL of the audio file. • muted: Designates that the audio file should be muted.
- 10. HTML IFrames • The iframe in HTML stands for Inline Frame. The ” iframe ” tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders. An inline frame is used to embed another document within the current HTML document. • Syntax:<iframe src="URL" title="description"></iframe> • Attributes value: It contains a single value URL that specifies the URL of the document that is embedded in the iframe. There are two types of URL links which are listed below: • Absolute URL: It points to another webpage. • Relative URL: It points to other files of the same web page.
- 11. HTML Images • There are 2 ways to insert the images into a webpage: • By providing a full path or address (URL) to access an internet file. • By providing the file path relative to the location of the current web page file. • The <img> tag is used to add or embed the images to a webpage/website. The “img” tag is an empty tag, which means it can contain only a list of attributes and it has no closing tag. • Syntax: <img src="url" alt="some_text" width="" height="">
- 12. HTML Layout • Page layout is the part of graphic design that deals with the arrangement of visual elements on a page. • Page layout is used to make the web pages look better. • It establishes the overall appearance, relative importance, and relationships between the graphic elements to achieve a smooth flow of information and eye movement for maximum effectiveness or impact.
- 13. HTML Links • It is a connection from one web resource to another. • A link has two ends,An anchor and direction. • The link starts at the “source” anchor and points to the “destination” anchor, which may be any Web resource such as an image, a video clip, a sound bite, a program, an HTML document or an element within an HTML document. • Links are specified in HTML using the “a” tag. • HTML Link Syntax : <a href=“url”TexkLink</a>
- 14. HTML Lists • A list is a record of short pieces of related information or used to display the data or any information in web pages in the ordered or unordered form. • For instance, to purchase the items, we need to prepare a list that can either be ordered or unordered list which helps us to organize the data & easy to find the item. • Supported Tags: These tags are used in HTML listing. • HTML <ul> Tag • HTML <ol> Tag • HTML <dl> Tag
- 15. HTML Rectangle The SVG <rect> element is used to create a rectangle. We can customize the rectangle shapes: Syntax: <rect x="x-axis co-ordinate" y="y-axis co-ordinate" width="length" height="length" rx="length" ry="length" style="style information" class="style class" > </rect> Attributes: • X: x-axis co-ordinate of top left. • Y: y-axis co-ordinate of top left. • width: Width of rectangle. • height: Height of rectangle. • rx: Roundness of the x-axis. • ry: Roundness of the y-axis. • style: Specify the inline style. • class: Specify the external style.
- 16. HTML Response • The response page after submitting the form by using the action attribute in the <form> element in the document. • This property is used to specify the URL page or destination of the form data that to be sent to the server after submission of the form. • It can be used in the “form” element. • Syntax : <form action="URL">
- 17. HTML Tables • HTML Table is an arrangement of data in rows and columns, or possibly in a more complex structure. • Tables are widely used in communication, research, and data analysis. • Tables are useful for various tasks such as presenting text information and numerical data. • It can be used to compare two or more items in the tabular form layout. • Tables are used to create databases • An HTML table is defined with the “table” tag. Each table row is defined with the “tr” tag. A table header is defined with the “th” tag. By default, table headings are bold and centered. A table data/cell is defined with the “td” tag.