HTML

Author: TrungDVQ (Fsoft-Academy)

Fsoft-Academy - 2020
 Lesson Objectives

Introduction HTML Basic Concepts First Project

01 02 03
 What is HTML?  Foundations of Each HTML  Apply HTML to a Project

 History  HTML Inline and Block

 HTML Semantic Elements

 Kinds of content

HTML Form HTML Media HTML Debug

04 05 06
 Input An HTML form is used to collect user DOM Inspector, Check syntax error,
input. The user input can then be sent HTML Validator,…
 Radio button
to a server for processing
 Text area

2
 1
HTML Form
 HTML Form

textarea fieldset
input

select button label

 HTML Form
HTML form elements let you collect input from your website’s visitors. 
 HTML Form

<form action=’/Server/' method='get' class='speaker'>

(all form elements inside)

</form>
HTML Form
HTML Form
 HTML Form
Sending form data
GET method: The method used by the browser to ask the server to send back a given
resource. In this case, the browser sends an empty body. Because the body is empty, if
a form is sent using this method the data sent to the server is appended to the URL.
POST method: The method the browser uses to talk to the server when asking for a
response that takes into account the data provided in the body of the HTTP request.
When the form is submitted using the POST method, you get no data appended to the
URL
 HTML Form
Form validation
Form validation (HTML5)
 ‘required’: Specifies whether a form field needs to be filled in before the form can
be submitted.
 ‘minlength’ and ‘maxlength’: Specifies the minimum and maximum length of
textual data (strings).
 ‘min’ and ‘max’: Specifies the minimum and maximum values of numerical input
types.
 ‘type’: Specifies whether the data needs to be a number, an email address, or some
other specific preset type.
 ‘pattern’: Specifies a regular expression that defines a pattern the entered data
needs to follow.
 <!-- form:get.speaker-form -->
  <form action='' method='get' class='speaker-form'>

   </form>
 HTML Input
There are many different types for the HTML <input> element.
 HTML Input - Attributes
Attribute Value Description
accept file_extension Specifies a filter for what file types the user can pick from the file input dialog box
audio/* (only for type="file")
video/*
image/*
media_type
autocomplete on Specifies whether an <input> element should have autocomplete enabled
off
autofocus autofocus Specifies that an <input> element should automatically get focus when the page loads
checked checked Specifies that an <input> element should be pre-selected when the page loads (for
type="checkbox" or type="radio")
disabled disabled Specifies that an <input> element should be disabled
form form_id Specifies the form the <input> element belongs to
formaction URL Specifies the URL of the file that will process the input control when the form is
submitted (for type="submit" and type="image")
formenctype application/x-www- Specifies how the form-data should be encoded when submitting it to the server (for
form-urlencoded type="submit" and type="image")
multipart/form-data
text/plain
 HTML Input - Attributes
Attribute Value Description
list datalist_id Refers to a <datalist> element that contains pre-defined options for an <input> element
max number Specifies the maximum value for an <input> element
date
maxlength number Specifies the maximum number of characters allowed in an <input> element
min number Specifies a minimum value for an <input> element
date
minlength number Specifies the minimum number of characters required in an <input> element
multiple multiple Specifies that a user can enter more than one value in an <input> element
pattern regexp Specifies a regular expression that an <input> element's value is checked against
placeholder text Specifies a short hint that describes the expected value of an <input> element
readonly readonly Specifies that an input field is read-only
required required Specifies that an input field must be filled out before submitting the form
size number Specifies the width, in characters, of an <input> element
src URL Specifies the URL of the image to use as a submit button (only for type="image")
step number Specifies the interval between legal numbers in an input field
any
value text Specifies the value of an <input> element
 
HTML input
 HTML Input

<div class='form-row'>
    <label for='full-name'>Name</label>
    <input id='full-name' name='full-name' type='text'/>
</div>
HTML Input
HTML fieldset – legend and Radio buttons
 HTML fieldset – legend and Radio buttons

<fieldset class='legacy-form-row'>

    <legend>Type of Talk</legend>

    <input id='talk-type-1' name='talk-type' type='radio' value='main-stage' />

    <label for='talk-type-1' class='radio-label'>Main Stage</label>

    <input id='talk-type-2' name='talk-type' type='radio' value='workshop' checked />

    <label for='talk-type-2' class='radio-label'>Workshop</label>

</fieldset>
HTML fieldset – legend and Radio buttons
 Dropdown Menu
<div class='form-row'>
    <label for='t-shirt'>T-Shirt Size</label>
    <select id='t-shirt' name='t-shirt'>
        <option value='xs'>Extra Small</option>
        <option value='s'>Small</option>
        <option value='m'>Medium</option>
        <option value='l' selected>Large</option>
    </select>
</div>

 The <select> element defines a drop-down list

 The <option> elements defines an option that can be selected.
 To define a pre-selected option, add the selected attribute to the option
 Dropdown Menu

 The rows attribute specifies the visible

number of lines in a text area.

 The Cols attribute Specifies the width

of the text area. Default value is 20

<div class='form-row'>
    <label for='abstract'>Abstract</label>
    <textarea id='abstract' name='abstract' rows="10" cols="30"></textarea>
    <div class='instructions'>Describe your talk in 500 words or less</div>
</div>
 Dropdown Menu

<div class='form-row'>
    <label class='checkbox-label' for='available'>
        <input id='available'
                name='available'
                type='checkbox'
                value='is-available'/>
        <span>I’m actually available the date of the talk</span>
    </label>
</div>
 HTML BUTTON

The <button> element defines a clickable button

Code sample: Output:

HTML BUTTON

<div class='form-row'>
    <button>Submit</button>
</div>
 5
HTML Media

26
 HTML Media
Multimedia on the web is sound, music, videos, movies, and animations.

https://www.w3schools.com/html/html_media.asp
 HTML Media
<video>
The HTML <video> element is used to show a video on a web page.

Code sample: Output:

 HTML Media
<video>
The HTML <video> element is used to show a video on a web page.

Code sample: Output:

Attributes of <video>
controls
Specifies that audio controls should be displayed (such as a play/pause button,
etc.)

autoplay
When this attribute is defined, audio starts playing as soon as it is ready, without
asking for the visitor's permission.

loop
This attribute is used to have the audio replay every time it is finished.
 HTML Media
<audio>
The HTML <audio> element is used to play an audio file on a web page.

Code sample: Output:

 HTML Media
<audio>
The HTML <audio> element is used to play an audio file on a web page.

Code sample: Output:

Attributes of <audio>
controls
Specifies that audio controls should be displayed (such as a play/pause button,
etc.)

autoplay
When this attribute is defined, audio starts playing as soon as it is ready, without
asking for the visitor's permission.

loop
This attribute is used to have the audio replay every time it is finished.
 HTML Media
<iframe>
The <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the
current HTML document.

Code sample: Output:

 6
HTML Debugging

33
 HTML Debugging
Debug

Syntax error Logic error

 HTML Debugging
Debug

 There are two main types of error that you'll come across:

 Syntax error: Relate to spelling errors in your code.

Easy to fix as long as you are familiar with the language's syntax and know what the error messages mean.
Syntax error
 Logic error: The syntax is actually correct, but the code is not what you intended it to be so the program runs
incorrectly
Often harder to fix than syntax errors, because there isn't an error message to direct you to the source of the
error.
Logic error
 HTML Debugging
Activate Debugging
F12 on your keyboard will activate debugging.
Then select "Console" in the debugger menu.
 HTML Debugging
Responsive Debugging
Select “Device icon" in the debugger menu.
 HTML Debugging
Inspect Element
Select “Inspect icon" in the debugger menu.
Move mouse to choose the node
 HTML Debugging
Search Element
Select “Element tab" in the debugger menu.
Press Control + F and type to the search bar at the bottom of the DOM Tree
 HTML Debugging
HTML Validator
We can check error for our HTML Document by running your HTML page through the Markup Validation Service via:
https://validator.w3.org/
Thank you!
Any questions?

Fresher Academy – 2020

 Until You Get It Right

Keep Training and Keep Learning