HTML - Introduction to HTML

DOCTYPE

Which tag should a .html document start with?

block-level elements

are those that will render on new lines in blocks by default

inline elements

are those that will render within the line itself

<details> - Used to add details that user can view or hide <mark> - Used to highlight or mark the text. <summary> - Defines a obvious heading for a <details> element <time> - Used to add a date/time.

other tags and their uses

The method attribute is used to specify the HTTP method used to send data while submitting the form. There are only two options available: GET and POST. GET - When using the GET method, after the submission of the form, the form values will be visible in the address bar of the browser. POST - When using the POST method, after the submission of the form, the form values will NOT be visible in the address bar of the browser.

method attribute does what

The required attribute indicates an input field that must be filled out before submitting the form. In most modern browsers, it will prevent the user from submitting the form until an acceptable value is entered. The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

required attribute does what

Global attributes are those that can be applied to any element on the page

what are Global attributes?

a section of a document that contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, menus, etc. Using these elements the page can collect information from a user which is typically submitted to a web server. To create a form, you would use the <form> tag.

what is HTML form

<span> <div>

what were the two non semantic elements mentioned?

MP4 video/mp4 WebM video/webm Ogg video/ogg

which MIME types is supported by the html5 video tag

is for major navigation blocks that specify a set of navigation links. <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav>

<navigation> tag purpose

defines a thematic grouping of content. In a document, we have sections like chapters, headers, footers, introduction, content, contact information, etc. <section> <h1>Protocol</h1> <p>A protocol is a standard set of rules that allow electronic devices to communicate with each other.</p> </section>

<section> tag purpose

Built-in form validation - It uses HTML5 form validation features. JavaScript validation - It is coded using JavaScript. This validation is completely customizable.

There are two different types of client-side validation.

<form> <article> <table>

3 semantic elements

used to identify content that is related to the primary content of the web page. The content inside the <aside> element does not constitute the primary content of the page. For example, we can have author information, related links, related content, and advertisements.

<aside> tag purpose

the <figure> element describes some flow content, optionally with a caption, that is self-contained and referenced as a single unit from the main flow of the document. The <img> and <figcaption> elements are grouped in a <figure> element. We use the <img> element to insert an image on the web page. To add the visual explanation of the image, we need a caption for that image. This can be achieved in the HTML5 by using <figcaption> element.

<figure> and <figcaption> tag purpose?

used to define the footer for a document or section. It contains information about the author of the document, copyright information, links to terms of use, contact information, etc.

<footer> tag purpose

<a href="www.google.com">link to Google!</a>

How to make a hyperlink in a webpage?

The submit button allows the user to send the form data to the web server. You can define a submit button by specifying the type attribute as "submit". The reset button is used to reset the form data and will display any default values. You can define a reset button by specifying the type attribute as "reset". Example <form action="test.php" method="post" id="users"> <label for="username">Username:</label> <input type="text" name="username" id="Username" /> <input type="submit" value="Submit" /> <input type="reset" value="Reset" /> </form>

Reset And Submit Buttons

The doctype declaration tag does not have a closing tag and it is not self-closing either.

What should i remember about DOCTYPE tag?

they are defined within the tag - these are key/value pairs that give metdata about the tag that are important for the browser to know.

Where attributes for element tags defined?

Client-side form validation.

The process of ensuring or validating the data before submitting to the server is called

element represents a section of content that forms an independent part of a document or site such as Forum post, Blog post, Newspaper article, etc., <article> <h1>What WHO do?</h1> <p>WHO works worldwide to promote health, keep the world safe, and serve the vulnerable. Our goal is to ensure that a billion more people have universal health coverage, to protect a billion more people from health emergencies, and provide a further billion people with better health and well-being..</p> </article>

<article> tag purpose

specifies a header for a document or section.

<header> tag purpose

File select boxes are used to allow the user to select a local file on their computer and send it as an attachment to the webserver. It is similar to a text box with a button that allows the user to browse for a file. Instead of browsing for the file, the path and the name of the file can also be written. They are created by specifying a type attribute value as "file". <form> <label for="fileselect">Upload:</label> <input type="file" /> </form>

File Select boxes

Hypertext Markup Language (HTML) a markup language for creating web pages and applications

HTML stands for?

Radio Buttons are used to let the user select exactly one value from a list of predefined options. It is created by specifying the type attribute value as "radio". NOTE: A form may have multiple sets of radio buttons. In order to make sure the user only selects one option from a given set, each radio element must have matching name attributes. In the example above, both buttons have a name attribute value as gender. <form> SELECT GENDER <br/> <input type="radio" name="gender" id="male"> <label for="male">Male</label> <br/> <input type="radio" name="gender" id="female"> <label for="female">Female</label> </form>

Radio input type

Select boxes are used to allow users to select one or more options from a drop-down list. Select boxes are created by using two elements: <select> and <option>. The <select> element defines a drop-down while list items are defined within the select element using <option> elements. <form> <label for="country">Country:</label> <select name="country" id="country"> <option value="United States">United States</option> <option value="Canada">Canada</option> <option value="Mexico">Mexico</option> </select> </form>

Select Boxes (Drop-downs)

The action attribute indicates where the form data will be processed. Typically the value is a URL of a server. Generally, the form data is sent to a webpage on the webserver after the user clicks on the submit button.

action attribute does what

action target name method value placeholder required

attributes that can be used on <form> and <input> tags

required: Used when the user must fill the field before submitting the form. minlength and maxlength: Used to specify the minimum and maximum length of the text. min and max: Used to specify the min and max values for the numerical fields. type: Defines the data should be a number or an email address or other predefined type. pattern: Defines a pattern (regular expression) the entered data needs to follow.

built in form validation attributes

Checkboxes are used to let the user select one or more values from a pre-defined set of options. The type attribute value for checkboxes input control is "checkbox". <form> <b>SELECT SUBJECTS</b> <br> <input type="checkbox" name="subject" id="math" /> <label for="math">Math</label> <input type="checkbox" name="subject" id="science" /> <label for="sceince">Science</label> <input type="checkbox" name="subject" id="english" /> <label for="english">English</label> </form> Just like radio buttons, a form may have multiple sets of checkboxes. In order to make sure the user selects options related to a given set, each checkbox element must have matching name attributes. In the example above, each checkbox has a name attribute value as subject.

checkbox input type

<div> - defines a "division of the page" <p> - defines a paragraph <span> - an inline tag for grouping text or elements <b> - bold text <i> - italicized text <h1>, <h2>, ... <h6> - these are headings, h1 is largest and h6 is smallest <br> - line break <table> - defines a table <img src="URL"> <ol> - an ordered list <ul> - an unordered list <a href=""> - makes a hyperlink

common HTML tags

<tagname></tagname> (not all elements have closing tags)

example of an element

src URL Specifies the URL of the video file controls controls Specifies the video controls such as a play/pause button, etc height pixels Sets the height of the video player width pixels Sets the width of the video player

html5 video attributes

The min and max attributes specify the minimum and maximum values for an input field. The min and max attributes work with the following input types: number, range, date, datetime-local, month, time and week. Tip: Use the max and min attributes together to create a range of legal values. (For example: Set a maximum date or a minimum date)

min and max attributes do what?

The name attribute should be provided for each input element. It is not required, but the value provides a label for the data once the form is submitted. If the name attribute is not specified in an input field then the data of that field will not be sent.

name attribute does what

Password fields are a type of text field in which the text entered is masked using asterisk or dots. This prevents others form viewing the screen to see what is typed in. Also, its created by specifying the type attribute value as "password".

password input element

The placeholder attribute specifies a hint that describes the expected value of the input field (a sample value or a short description of the expected format). The short hint is displayed in the input field before the user enters a value. The placeholder attribute works with the following input types: text, search, url, tel, email, and password.

placeholder attribute does what

used to specify whether the submitted result will open in the current window, a new tab or on a new frame. The default value used is "self" which results in the form submission in the same window. To make the result display in a new browser tab, the value should be set to "blank".

target attribute does what

A text area is a multi-line text input control which allows users to provide a paragraph or multiple lines of text. It is created by using the "textarea" element. This is one of the few input controls that DO NOT use the <input> element. You can control the size of a text area by adding attributes "rows" and "cols" to specify the number of rows and columns of text it supports. Most often text area elements are resizable, but the default size is managed by those two attributes

text area tag in form tag

A text field is a one-line input field that allows the user to input a line of text. Text Fields are created by specifying the type attribute value as "text".

text input element

controls attribute

the <audio> tag has what attribute that gives it the ability to add audio controls?

used to embed audio in a web page. <body> <h1>The audio element</h1> <p>Click the Play button:</p> <audio controls> <source src="River.ogg" type="audio/ogg"> Invalid audio!!! - Browser doesn't support. </audio> </body>

the <audio> tag purpose

used to embed a video on a web page, such as a movie clip or other video streams. <body> <h1>The video element</h1> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> Invalid audio!!! - Browser doesn't support. </video> </body>

the <video tag purppose

The value attribute specifies an initial value for an input field. It also serves as the attribute to use when providing a button label for submit and reset input elements.

value attribute does what

declaration is used to inform the browser about the version of HTML used in the document.

what is <!DOCTYPE html> declaration used for?

A character encoding is an approach of converting bytes into characters. For validating the HTML document, a program must choose a character encoding.

what is <meta charset="UTF-8"> used for?