Scribd
Upload
183 views25 pages

HTML

The document provides an overview of HTML elements and concepts. It discusses: 1) Common HTML tags like <p>, <h1-h6>, <ul>, <ol>, <li>, <a>, <img>, and how they are used. 2) The difference between block and inline elements and examples of each. 3) How to structure an HTML document using tags like <html>, <head>, <body>, <title>. 4) Additional elements like <table>, <tr>, <td>, <form>, <input> and attributes like href, src, alt. 5) Semantic HTML5 elements and making code more accessible and meaningful.

Uploaded by

Tuấn Đỗ
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
183 views25 pages

HTML

The document provides an overview of HTML elements and concepts. It discusses: 1) Common HTML tags like <p>, <h1-h6>, <ul>, <ol>, <li>, <a>, <img>, and how they are used. 2) The difference between block and inline elements and examples of each. 3) How to structure an HTML document using tags like <html>, <head>, <body>, <title>. 4) Additional elements like <table>, <tr>, <td>, <form>, <input> and attributes like href, src, alt. 5) Semantic HTML5 elements and making code more accessible and meaningful.

Uploaded by

Tuấn Đỗ
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 25

Html ?

Markup language, not programming language

Marking up the document

Take text content and mark it up with some structure

Html element:

<i> </i>: italic(ko xuong hang - inline)

<b></b>: bold(ko xuong hang - inline)

Nếu bỏ đuôi đi thì nó sẽ tô đậm(in nghiêng) nguyên hàng

<p></p> (block) : contains any sort of related content that you want to group together: images,
different input, labels

If we add more paragraph (but not add <p> into single paragraph) in vsc, may add more space, but
when display on the browser, it goes inline (không xuống dòng, mà ghi thẳng dài ngoằng)

Do <p> ở dạng block (has it own line) nên mỗi paragraph sẽ chiếm một hàng

Can have bold, italic in side <p>

<h1-h6> (block) : heading (we can change the size of h1, h6 with css, can make size of h6 bigger than
h1)

We should always only have 1 h1 at most on a page, has h2 if had h1

Cú pháp: syntax*number
Write our html in a standard “skeleton”

<!Doctype html> : use as a flag to your browser that indicates we are using html five, latest features
in html

<html>: also called the root element, represents the top, entire top level element, everything in page
is supposed to be a descendant of this element

<head>: called the document metadata element, contains basically things don’t show up in the page.
Its all metadata information about your web page, any scripts that you are loading,

Css and javascript and different fonts and icons and other assets that we need to do and include in
the head

Contains <title> : change what we see in the tab, google use that to create the links in the search
results, use that to create links

<body> : represents all the content in document, it can only be one, it can include any of the
elements we have learned so far

Shortcut : ! +tab

Shift + alt + f: format căn lề cho đẹp


List

2 different kinds of lists : numbered list and a bulleted list or an unordered list

<OL> (block) : order list

<ul> (block): unordered list

<li> (block, list-item): in both ol and ul (list item), can put bolic, italic elements inside li

Li is block chiếm nguyên hàng, còn nội dung thì size vẫn vậy

We can also add another list in <li>, called nested unorder list

Shortcut: shift + alt + down/up: duplicate element


Achor tags

Create hyperlink, link to another web page, an email address or just a location

<a href = “”> (inline, not a block, ko chiếm trọn 1 hàng): use attributes to link

Attributes are like little pieces of information we can pass into a tag (href)

If types “google.com”, it trys to go to /…/google.com from the url I was on, and it wont work

We are currently on file, if you type google.com, it just thinks there’s a file called google.com, relative
to where you are right now

But if you want go to a website, http is what you need. (http://google.com)

You use this tag to link to the website that is owned by somebody else, or can actually link to another
html document that you have created

Create a file called about.html, put it in the folder you are in


Image

Embed images in an html document

<img src = “” alt = “”> (inline, ko phải block) : does not have the opening or closing tag, there is no
content (attribute src, alt)

We can change the size of the image, you can do through html, like add attribute width, but it better
to use css

You can use the image on the internet, not necessarily the image in your local

You can create folder to contain image, and link the attribute src to the address of the image
What is html 5

Is the latest evolution of the standard that defines html

The term html 5 refers to new stuff in html and it also refers to big bundles of stuff for the browser
that does include new html elements

New stuff for css, 3D graphics upgrades for performance and enhancements, not all in html

So when refers to html5, it is just the latest evolution of the standard that defines html

It is how html should work, you should accept its plan and implement html, all these different
browsers and these companies are going to implement html based off that standard

It is just a bunch of things html should work


Block – inline

2 element span and the div

<div> (block) : content division element, generic container to hold things or to group elements

If div around some content, going to take up a whole block and force content above and below it

It wrap up some content and treat that only content with some css, some content may include
button, text, image, we can wrap them all and treat it like just that block affected but not any block,
we can style it all at once

But the size of the content is not changed

<Span> (inline) : generic container but it is an inline element

Its just a way to call something out so we could style it differently

Odd assortment element

<Hr> (block) : just 1 line

<br>: xuống dòng, thường đặt ở cuối (can make a poem, can put into <p>)

<sup></sup>(inline): dấu mũ, có thể add content vào hoặc là hyper link<span> <a href = “”>[2]</a>
</span>

<sub></sub>(inline): giống sup nhưng ở bên dưới chân(nguyên tố hóa học)

Kết hợp sup và sub có thể tạo phân số


Html entity

We can not use sign less or greater than ( < and > ), it is the reserved character, you should not add
them normally, instead we use entity code

Just search html enity less than, result : &lt;

>: &gt;

&: &amp;

Snowman: &#9731;

Registered sign: &#174;

Source: entitycode.com
Semantic markup

<Footer>= <nav> = <section> = <header> = <main> = <div> (exactly the same) : they are meaningful,
tell us what they are (all block)

Make your code mor crawlable, more friendly to other applications

Making your code more accessible, more navigable

Just add meaning into our markup is the idea behind writing semantic markup

<main> : represent the dominant content of the <body> of a document. Basically it should be the
main content of your page and it should exclude any content that would be repeated across the
page: sidebars, navigation links, copyright information, site logo, search form. The content of <main>
elements should be unique to the document

For example, with the wikidepia, if we were to have a <main>, maybe put it around the main content
(the text content, heading, image, paragraph) not the nav bar, not the search, not the sidebar, but
everything with the main content about the chicken

It could just be divs, but use main

<nav> : represent anything on the page that provides navigation links. So that it could be links to
other parts on the same page like we have on wikidepia, or it could be links to completely different
resources, both are just navigation links. It should contains links

Nav like top of the page: home – contact – about

Or home > html > references

It is for navigational content

<section> : represent standalone section of an application or of a website, a section is really


supposed to be a section of content

Like this:

<h1>Choosing an Apple</h1>

<section>

<h2>Introduction</h2>

<p>This document provides a guide to help with the important task of choosing the correct
Apple.</p>

</section>
<section>

<h2>Criteria</h2>

<p>There are many different criteria to be considered when choosing an Apple — size, color,
firmness, sweetness, tartness...</p>

</section>

<article> : represents a self contained composition in a document , not have to be reserved only for a
newspaper article or a blog article

Should be a heading that explains what the article is or what it is about

<aside> : a part of the document whose content is only indirectedly related to the document’s main
content. Frequently presented as sidebars or call-out boxes.

You can put a header/footer inside of other elements (example : <article>) you can have more than 1
header/footer in a page

Couple of element:

<time> (inline)

<figure> : image with caption

These elements are important to make our code easy to understand


Vsc emmt

Ul > li

Ul > li *5

Ul > li*5 > a

Ul > li*5>a[href = $]

A{lick me}
Table

Consist of a lot of html elements as you can see

Data table, two dimensions

<table> (block)

<Td>(inline) defines a single cell in a table that contains data (nó là từng ô trong bảng)

<tr>: row of cells

<th>: header

<Thead>

<tfoot> : like total, average row or something not in data of table

Making table head with 2 rows

rowspan: if we add this attributes like rowspan = “2”, this cell of table will take 2 row, push cell of 2th
row to the right column or left column of that row

Tương tự colspan : make this cell to span 2 column if colspan = “2” (only that cell span 2 column)
Form element

<form>(block) : the container, the box, all of your inputs are put inside of, the form element also
dictates where the form data should be sent when the form is submitted, we can send data to any
servers or sent data to reddit to, it is flexible, the form element wrap around is where we specify how
the data should be sent and when

Attribute action: if empty, nothing changes, but it is very important, it specifies where the data
should be sent when the form is submitted

Many forms have complicated data, and it all sent together via an http request

When we search anything on search bar of the website, when hit enter to submit that form, an http
request will be sent to /search/, now /search/ is not a website so we can go to, this is relative to
where we currently are (now we are reddit.com), it is like another file in the server of reddit, so the
server realize this is the job of a server and its mission is to take our data and searches server’s
database to find that information(image, text, posts) and then combine that information with html,
css into web page, and it sent the web page back to us, the browser will render it.

Remember : when summit the form, a http request will be sent and we control where that request
goes to using this attribute called action, we can control which type of http method

The most common element form control

<input>: extremely versatile, make 20+ inputs (checkbox, color picker, date picker, password, text, ..)
by just change 1 attribute called type (not have closing tag)

Types:

Text, Password, color, month, number

Placeholder: text show up before we type anything (it doesn’t work for every single input)
Label

Really important in terms of accessibility and making your forms easier to use

<label> (inline): does more than just visually give us some text (often put it next to the input check
box, it is associated with this check box, so they are linked behind the scene so if someone is using a
screen reader, it will know exactly what text belongs with this)

There is a direct connection between some input or some form control and some piece of text

Also, it’s not just about enhancing this for screen readers or making a better experience for people, it
also makes the label it self clickable when we associate two elements

Create connections:

Two attributes

1 from input : id

1 from label: for

Only one element on the page should have a given id


Button

<button> (inline-block) : has closing tag

<button>text</button>

If the button insides the form, when you hit submit , it will submit to attribute action= “” of the
<form>, else it will do nothing(we can use javascript to do it)

Type attribute : the default is “submit”, when hit inside the form, it submit to action

If set to button, it will behave like a button, and won’t do anything if we hit it inside form

Another to create button is

<input type = “submit”> : look identical

Change content of input: attribute value

Attribute name: is the name that will be used to send the data to the server (variable), the data will
be labeled in this name

Should put it on every single input that you use

We don’t want to see data on the url, so that there is different types of requests, http request put a
post request

It is totally up to the server, the company to decide what the search term name be

If you only have input but don’t have button, when you hit enter, it will also submit

Type input

Checkbox

If we don’t check and submit, the url will not have the name, else the value of name = on

Radio button:

In a group of radion button, you can only select one, but if you create it normally, it wont connect, so
you can select many of them

To create connection, by giving them the same exact name


But if you create a submit button, when you hit submit, it just sent name = on (on a bove example is
drone = on) and it is not helpful because we want to know which one of these was selected

To do that, we have to add on a particular attribute called value, it is not going to displayed to a user
instead, it is what sent through when submit

When submit it will name = value of what we checked.

<Input type = “” name = “” id = “” value = “”>

<label for = “id”></label>

<Button type = “”></button>


Select element

<select name = “” id = “”>

<Option value = “” selected></option>

</select> (inline-block): a dropdown menu, can also connect with label with attribute id, a option
also has an attribute value to submit

Id attribute for label

Name to sent the selection


Type input

Range
Text area element(inline)

You can write anything inside that area, but this is not an input

Simple form

<form action="" method="get" accept-charset="utf-8">

<div>

<label for="username">Username</label>

<input type="text" name="username" id="username" placeholder="username" />

</div>

<div>

<label for="password">Password</label>

<input type="password" name="password" id="password" placeholder="password" />

</div>

<button type="submit">Register</button>

</form>
Validation

Adding constraint, some rules for input, example, requiring that some fields can’t be empty or that a
passwords has to be between 12-30 characters

The built in browser validations that we can add in to our forms and our input

This is all done with JavaScript, in the browser, client side

There is something server side validation, which is when we actually submit the data right no, it wont
even let me submit

Somebody could directly send data to server but not use ui web to sent data, so there is server
validation

Basic of build in validation

Attribute called

Required

Minlength

Input type email already having build in validation, but need a required attribute

Also URL
Normal form html

<form action="/birds">
        <h1>Race Registration</h1>
        <div>
            <label for="First">First Name</label>
            <input type="text" id="First" name="First_name" required>
            <label for="Last">Last Name</label>
            <input type="text" id="Last" name="Last_name" required>
        </div>
        <div>
            <p>Select a Race</p>
            <div>
                <input type="checkbox" name="check" id="Fun">
                <label for="Fun">Fun Run 5K</label>
            </div>
            <div>
                <input type="checkbox" name="check" id="Half">
                <label for="Half">Half Marathon</label>
            </div>
            <div>
                <input type="checkbox" name="check" id="Full">
                <label for="Full">Full Marathon</label>
            </div>
        </div>
        <div>
            <label for="email">Email</label>
            <input type="text" id="email" name="email" required>
            <label for="pass">Password</label>
            <input type="password" id="pass" name="pass" required>
        </div>
        <div>
            <label for="age select">Select Age Group</label>
            <select name="option age" id="age select">
                <option value="under" selected>under 18</option>
                <option value="mid">18-50</option>
                <option value="above">above 50</option>
            </select>
        </div>
        <button>Register</button>
    </form>
http://127.0.0.1:5500/birds?First_name=Tu%E1%BA%A5n&Last_name=
%C4%90%E1%BB
%97+Anh&check=fun&email=doanhtuan3536%40gmail.com&pass=1234&option+age=mid
Một vài lưu ý

Input attribute

Type: chọn loại : checkbox (chọn multiple), radio(có thể chọn nhiều hoặc 1)

Name : là để gửi về server biến có tên name chứa dữ liệu đã check hoặc đánh dấu hoặc value

Với checkbox thì mỗi cái sẽ có một name để phân biệt mỗi cái checkbox, cho dù trùng name thì vẫn
có thể tick nhiều cái được, và name sẽ gửi về là on hoặc là các giá trị của value vd như là
http://127.0.0.1:5500/birds?check=c1&check=c2&check=c3 (check là name và value từng ông
checkbox là c1,c2,c3) hoặc là http://127.0.0.1:5500/birds?check=on&check=on&check=on

Với radio, nếu để default là có thể tick nhìu cái, nếu muốn chỉ được tick một cái thì sử dụng cùng
name hết cho tất cả các radio, và attribute value phải khác nhau để biết tick cái nào để lưu data vào
biến name và gửi đi, nếu ko có giá trị value thì name = on

Id: để nối với label thuộc tính for

Checked : default

Value: có thể là giá trị của ông checkbox và radio, cũng có thể là giá trị mặc định của ông type :range

Min max

Select element

Name : biến gửi về database

Id: gắn với label

Các option phải có value

Nếu button để ngoài form thì không có kết nối gì đến input

You might also like