Slides 1

Lập trình web 2018 – hungdn@ptit.edu.
vn
HTML Content
1. HTML Text
Học viện công nghệ Bưu chính Viễn thông 1

Lập trình web 2018 – hungdn@ptit.edu.vn
Paragraphs
• Paragraphs <p> are the most used <p>I am a paragraph, oh yes I am.</p>
HTML element, as they act as the
default block-level element and are
quick to write
• Attribute
• Align (not supported in HTML5) <p align="left|right|center|justify">
• Use CSS instead
<p style="text-align:right">
Lists
• Lists come in 3 variations <p>My shopping list:</p>
• <ul> are unordered lists <ul>
<li>Milk</li>
• <ol> are ordered lists (whose items are
automatically numbered) <li>Bread</li>
<li>Chocolate</li>
• <dl> are definition/description lists
<li>More chocolate</li>
• HTML lists require a specific structure </ul>
• <ul> and <ol> must include and be direct <ol>
parents of <li> which stands for list items <li>Drive to the end of the road</li>
• consequently, <li> elements can not be <li>Turn right</li>
used on their own, and must be direct <li>Go straight across the first two round
children of either a <ul> or a <ol> abouts</li>
<li>Turn left at the third roundabout</li>
<li>The school is on your right, 300 meter
s up the road</li>
</ol>

Lists (Cont.)
• Attribute <ol type="i">
• start : integer attribute specifies the start <li>foo</li>
value for numbering the individual list <li>bar</li>
items <li>spam</li>
• type : </ol>
• <ul> circle, disc, square <ol start="7">
• <ol> Indicates the numbering type ( a, A, <li>first item</li>
i, I, 1 (default) <li>second item</li>
• reversed : Boolean attribute specifies <li>third item</li>
that the items of the list are specified in </ol>
reversed order.
<ol start="7" reversed>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
Lists (Cont.)
• Definition lists are for items that come in pairs. They must include
pairs of <dt> definition terms and <dd> definition descriptions as
direct children
<dl>
<dt>Web</dt>
<dd>The part of the Internet that contains websites and webpages</dd>
<dt>HTML</dt>
<dd>A markup language for creating webpages</dd>
<dt>CSS</dt>
<dd>A technology to make HTML look better</dd>
</dl>

Blockquotes
• Blockquotes are used to identify a citation
<p>Sir Tim Berners-Lee said:</p>
<blockquote>
“The original idea of the web was that it should be a collaborative spa
ce where you can communicate through sharing information.”
</blockquote>
• Attribute
• cite: URL that designates a source document or message for the information
quoted
<blockquote cite="http://developer.mozilla.org">
<p>
This is a quotation taken from the Mozilla Developer Center.
</p>
</blockquote>
Headings
• There are 6 levels of headings <h1>Heading level 1</h1>
available, ranging from <h1> to <h6>, <h2>Heading level 2</h2>
1 being the most important one <h3>Heading level 3</h3>
• Headings are meant to be used along <h4>Heading level 4</h4>
with paragraphs and lists, to draw a <h5>Heading level 5</h5>
natural structure to your document. As <h6>Heading level 6</h6>
headings carry more semantic weight, be
careful to keep the balance between
important and “normal” content Heading level 1
• Only using headings in a HTML document
wouldn’t make sense: if everything feels Heading level 2
important, nothing really is. You need to
provide depth in your structure Heading level 3
• Attribute Heading level 4
• Align (not supported in HTML5) Heading level 5
Heading level 6

Inline semantics
• Strong <p>
• For important words, use the <strong> This is <strong>important</strong>
tag but this is not.
• By default, <strong> elements are </p>
displayed in bold
• Emphasis <p>
• For emphasized words, use the <em> tag This is <em>emphasized</em>
• By default, <em> elements are displayed but this is not.
in italic </p>
• Strong and Emphasis element only

includes the global attributes.
Inline semantics
• Abbreviations
<abbr title="HyperText Markup Language">
• Abbreviations like W3C or CD can use the HTML</abbr>
<abbr> element
• Use the title attribute to define the full
description of the abbreviation
• Acronym
<p>
• This element has been removed in
HTML5 The
<acronym title="World Wide Web">WWW
</acronym> is only a component of
the Internet.
</p>

Inline semantics
• Inline quotes <p>
• The <blockquote> element is a block- According to Mozilla's website,
level element. It has an inline version: <q cite="https://www.mozilla.org/en-
<q> US/about/history/details/">
• Attribute cite Firefox 1.0
was released in 2004 and became a
• Italic, bold, underline big success.
• <i> </q>
• <b> </p>
• <u>
2. HTML links

Hyperlinks
• Links are essential in HTML, as the Web <p>
was initially designed to be an To search for something, visit
information network of documents
linked between each other <a href="http://www.google.com">
Google</a>.
• The “HyperText” part of HTML defines
what kind of links we use: hypertext </p>
links, a.k.a hyperlinks
• In HTML, links are inline elements written
with the <a> tag
• The href attribute (hypertext reference) is
used to define the target of the link <a href="https://www.mozilla.org/en-US/">
<img src="mozilla-
• Attribute image.png" alt="mozilla logo that links to t
• Download (html5) he mozilla homepage">
• href </a>
• type
• target
• Block level links
Target
• Links are the primary interaction of a 
document to another by clicking on <a href="#attr-href">
links Description of Same-Page Links
</a>
• There are 3 types of target you can
define <p>
• anchor targets, to navigate within the To contact a specific staff member?
same page Find details on our <a href="contacts
• relative URLs, usually to navigate within .html">contacts page</a>.
the same website </p>
• absolute URLs, usually to navigate to
another website <a href="https://developer.mozilla.org/en
• Relative or absolute links? -US/" target="_blank">
<img src="https://mdn.mozillademos.or
• Send mail g/files/6851/mdn_logo.png"
• mailto: alt="MDN logo" />
</a>

3. Multimedia and embedding

• image
• video and audio
• vector graphic
• responsive image
Image
• Image : The major media on the Web
• Images are the first non-textual content to <img src="dinosaur.jpg">
have appeared on the Web. Most image
formats you can find on your computer can
also be displayed in your browser .jpg, .gif,
.png, .bmp <img src="images/dinosaur.jpg">
• Syntax
• Images use the <img> element, which is a
self-closing element (it only has an opening <img src="https://www.example.com/imag
tag) es/dinosaur.jpg">
• Attributes
• The src attribute defines the location of the
image <img src="images/dinosaur.jpg"
• Alternative text supposed to be a textual alt="The head and torso of a d
description of the image, for use in
situations where the image cannot be inosaur skeleton;it has a large head w
seen/displayed ith long sharp teeth" title="A T-Rex
• Title provide further supporting on display in the Manchester
information if needed University Museum">

Image
• Dimensions <img src="images/dinosaur.jpg"
• Every image has 2 dimensions: a width alt="The head and torso of a dino
and a height saur skeleton;it has a large head with
long sharp teeth"
• Block or inline?
width="400"
• An Image is not an HTML block element height="341">
but actually an inline element
• Annotating images with figures and <figure>
figure captions <img src="images/dinosaur.jpg"
• Use the HTML5 <figure> and <figcaption> alt="The head and torso of a
elements dinosaur skeleton;it has a large head
with long sharp teeth">
<figcaption> A T-
Rex on display in the Manchester Universi
ty Museum. </figcaption>
</figure>
Video and audio

• The <video> element allows you to <video src="rabbit320.webm">
embed a video very easily <p>Your browser doesn't support HTML5
video. Here is a
• Attribute <a href="rabbit320.webm">link to the
• src: The src attribute contains a path to video</a> instead.</p>
the video you want to embed. It works in </video>
exactly the same way
• controls: include the browser's own
control interface, or build your interface
using the appropriate JavaScript API
• paragraph inside the <video> tags: called
fallback content — this will be displayed
if the browser accessing the page doesn't
support the <video> element

Video and Audio

<video controls>
• Supporting multiple formats
<source src="rabbit320.mp4" type="video/mp4">
• <source> tag <source src="rabbit320.webm" type="video/webm">
• Some new features <p>Your browser doesn't support HTML5 video.
• width and height Here is a <a href="rabbit320.mp4">
link to the video</a> instead.</p>
• autoplay
</video>
• buffered
• loop
• muted <audio controls>
• poster <source src="viper.mp3" type="audio/mp3">
<source src="viper.ogg" type="audio/ogg">
• preload
<p>Your browser doesn't support HTML5 audio.
• none
Here is a <a href="viper.mp3">
• auto link to the audio</a> instead.</p>
• metadata </audio>
Video
• Displaying video text tracks <video controls>
• Web Video Text Tracks Format (WebVTT) <source src="example.mp4"
is a format for displaying timed text type="video/mp4">
tracks (subtitle or caption) <source src="example.webm"
• WebVTT is a text based format, which type="video/webm">
must be encoded using UTF-8 <track kind="subtitles"
• Styling WebTT cues src="subtitles_en.vtt" srclang="en">
• site CSS </video>
• file itself
• <track> element
• src
• kind
• srclang

Vector graphic
• Two types of image
• Raster images are defined using a grid of
pixels
• Vector images are defined using
algorithms
• The SVG format allows us to create
powerful vector graphics for use on
the Web
• SVG is an XML-based language for
describing vector images
<svg version="1.1"
baseProfile="full"
width="300" height="200"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="black" />
<circle cx="150" cy="100" r="90" fill="blue" />
</svg>
Responsive images
• Problem: Resolution switching
-> Different sizes
• Solved (with HTML): <img>
• srcset : set of possible image sources for
the user agent to use
• src: This attribute is mandatory for the
<img> element
• sizes: a set of source sizes
<img srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="elva-fairy-800w.jpg"
alt="Elva dressed as a fairy">

Responsive images
• Solved (with HTML) <picture>
• like <video> and <audio>
• <source> element
• media
• srcset
• <img> : provides a default case that will apply when none of the media
conditions return true
<picture>
<source media="(max-width: 799px)"
srcset="elva-480w-close-portrait.jpg">
<source media="(min-width: 800px)"
srcset="elva-800w.jpg">
<img src="elva-800w.jpg"
alt="Chris standing up holding his daughter Elva">
</picture>
Ex: Responsive images

Demo
• HTML List • Multimedia And embedding
• ul • Image (src, alt, title, width, height)
• ol • Video ( src, controls, muted, autoplay,
• nested poster, preload,loop)
• start, type, reversed • Object
• dl, dt, dd • Responsive Image
• HTML Link • Example MDN

• Relative • Image
• Absolute • Video
• Deeplink • Responsive Image
• Fragment #Id
Exercise
• HTML • Môn học lập trình web
• Reader view • Giới thiệu bản thân
• Blog
• Hỗ trợ hiển thị nhiều kích thước
• Chỉ sử dụng HTML
• Ý tưởng
• Trang web học tập

4. HTML table
Table
• A table is a structured set of data
made up of of rows and columns
(tabular data)

Syntax
<table>
• Building a table in HTML requires a <tr>
<td>John Lennon</td>
specific structure <td>Rhythm Guitar</td>
• open a <table> </tr>
• add rows with <tr> <tr>
<td>Paul McCartney</td>
• add regular cells with <td> or heading <td>Bass</td>
cells with <th> </tr>
• This hierarchy is required, and all 3 <tr>
<td>George Harrison</td>
elements are necessary to build a <td>Lead Guitar</td>
table </tr>
• define your table cells from left to right, <tr>
and then from to bottom <td>Ringo Starr</td>
<td>Drums</td>
</tr> John Lennon Rhythm Guitar
</table>
Paul McCartney Bass
George Harrison Lead Guitar
Ringo Starr Drums
thead, tfoot and tbody

<table>
• table can have a head, a body, and a <thead>
<tr>
foot <th>Name</th>
• <thead>, <tfoot> and <tbody> are <th>Instrument</th>
collections of rows </tr>
</thead>
• <thead> and <tfoot> are used as a
<tfoot>
summary of the columns
<tr>
<th>Name</th>
<th>Instrument</th>
Name Instrument
</tr>
John Lennon Rhythm Guitar </tfoot>
Paul McCartney Bass <tbody>
<tr>
George Harrison Lead Guitar <td>John Lennon</td>
Ringo Starr Drums <td>Rhythm Guitar</td>
</tr>
Name Instrument
…
</tbody>
</table>

colspan and rowspan

• You can merge columns or rows by
using the rowspan and colspan
respectively
• merge columns you need to use the
rowspan attribute
<tr>
<th rowspan="5" >Singular</th>
<th colspan="2" >1st Person</th>
<td>I</td>
<td>me</td>
</tr>
<tr>
<th rowspan="3" >Plural</th>
<th colspan="2" >1st Person</th>
<td>we</td>
<td>us</td>
</tr>
Table
• Adding a caption to your table with <table>
<caption> <caption>
Dinosaurs in the Jurassic period
• Providing common styling to columns </caption>
• HTML has a method of defining styling ...
information for an entire column of data </table>
all in one place — the <col> and
<colgroup> elements Data 1 Data 2
Calcutta Orange
<table>
<colgroup> Robots Jazz
<col>
<col style="background-color: yellow">
</colgroup>
…
</table>

Attributes
Attribute CSS
• Align • margin-left / margin-right / margin
• bgcolor • background-color
• border • border, border-color, border-width,
border-style
• cellpadding • border-collapse
• cellspacing • border-spacing
• summary • <caption> and <details>
• width • width
5. HTML structure

Basic sections of a documen

• HTML for structuring content
• header: <header>
• navigation bar: <nav>
• main content: <main>
• <article>
• <section>
• <div>
• sidebar: <aside>
(often placed in <main>
• footer: <footer>
6. HTML Form

HTML forms
• HTML Forms are one of the main • Designing your form
points of interaction between a user
and a web site or application
• signing up and logging in to websites
• entering personal information (name,
address, credit card details…)
• filtering content (by using dropdowns,
checkboxes…)
• performing a search
• uploading files
Form element
• The <form> is a block-level element
thats defines an interactive part of a
webpage
• all form controls (like <input>, <textarea>
or <button>) must appear within a
<form> element
• Two HTML attributes are required
• action contains an address that defines
where the form information will be sent • 3 label
• method can be either GET or POST and • 1 text input
defines how the form information will be
sent • 1 email input
• 1 textarea
• 1 submit button

Text input
Placeholders
• Text inputs can display a placeholder
text, that will disappear as soon as
some text is entered.
• When you start typing something, <input type="text" placeholder="Enter
you’ll see the text “Enter your name” your name">
disappear.

Labels
• Because form elements on their own
are not very descriptive, they are <label>Email</label>
usually preceded by a text label <input type="email">
• can be paired with a specific form

control by using the for attribute
and matching its value with the
input’s Id
• Labels are clickable <label for="first_name">
• Multiple labels First name</label>
<input id="first_name" type="text">
Checkboxes
• Checkboxes are form controls that <input type="checkbox" checked
only have 2 states: checked or id="carrots" name="carrots"
unchecked value="carrots">
• created using the <input> element with
its type attribute set to the value
checkbox
• Because it can be hard to click on a
small checkbox, it is recommended to
wrap a <label> around the checkbox
and its description.

Radio buttons
<fieldset>
• You can present the user a list of <legend>What is your favorite meal?</legend>
options to choose from by using radio <ul>
buttons <li>
<label for="soup">Soup</label>
• created using the <input> element with <input type="radio" checked
its type attribute set to the value radio. id="soup" name="meal" value="soup">
• Using the same value for the name </li>
<li>
attribute to group a list of radio <label for="curry">Curry</label>
buttons together <input type="radio" id="curry"
name="meal" value="curry">
</li>
<li>
<label for="pizza">Pizza</label>
<input type="radio" id="pizza"
name="meal" value="pizza">
</li>
</ul>
</fieldset>
Drop-down content
• Drop-down widgets are a simple way <select id="groups" name="groups">
to let users select one of many <optgroup label="fruits">
options without taking up much <option>Banana</option>
space in the user interface <option selected>Cherry</option>
• select box <option>Lemon</option>
</optgroup>
• autocomplete box
<optgroup label="vegetables">
• Select box <option>Carrot</option>
• created with a <select> element with one <option>Eggplant</option>
or more <option> elements as its children <option>Potato</option>
• selected </optgroup>
• <option> element </select>
• value
• <optgroup>

Drop-down content
• Multiple choice select box
<select multiple id="multi" name="multi">
• adding the multiple attribute to the
<select> element <option>Banana</option>
<option>Cherry</option>
<option>Lemon</option>
</select>
Autocomplete box
• You can provide suggested, automatically-completed values for form
widgets using the <datalist> element with some child <option>
elements to specify the values to display
<label for="myFruit">What's your favorite fruit?</label>
<input type="text" name="myFruit" id="myFruit" list="mySuggestion">
<datalist id="mySuggestion">
<option>Apple</option>
<option>Banana</option>
<option>Blackberry</option>
<option>Blueberry</option>
<option>Lemon</option>
<option>Lychee</option>
<option>Peach</option>
<option>Pear</option>
</datalist>

Button
• Within HTML forms, there are three <button type="submit">
kinds of button This a <br><strong>submit button</strong>
• Submit: sends the form data to the server</button>
<input type="submit" value="This is a submit
• Reset: resets all form widgets to their button">
default values
• Anonymous : If you omit the type <button type="reset">
attribute, this is the default value This a <br><strong>reset button</strong>
• A button </button>
<input type="reset" value="This is a reset
• created using a <button> element or an button">
<input> element with type attribute that
button <button type="button">
• Difference? This an <br><strong>anonymous button</strong>
</button>
<input type="button" value="This is an anonymous
button">
Complete form

DEMO
• HTML Table • HTTP Form
• Tag • action
• caption • method
• thead • get
• tfoot • post
• tbody
• th
• Register Form
• tr • textfield
• td • input
• colspan and rowspan • text
• Attribute and Style • password
• border • …
• cellpadding (border-collapse) • Button
• cellspacing (border-spacing) • Required / Pattern
• colgroup
• align ? text-align
Exercise
1. Complex table 1. Complex form
2. …. 2. ….
3. … 3. …
4. .. 4. ..
5. . 5. .

Q&A

Slides 1

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Slides 1

Загружено:

Авторское право:

Доступные форматы

Lập trình web 2018 – hungdn@ptit.edu.

Học viện công nghệ Bưu chính Viễn thông 1

Học viện công nghệ Bưu chính Viễn thông 2

Học viện công nghệ Bưu chính Viễn thông 3

Học viện công nghệ Bưu chính Viễn thông 4

• Strong and Emphasis element only

Học viện công nghệ Bưu chính Viễn thông 5

Học viện công nghệ Bưu chính Viễn thông 6

Học viện công nghệ Bưu chính Viễn thông 7

3. Multimedia and embedding

Học viện công nghệ Bưu chính Viễn thông 8

Video and audio

Học viện công nghệ Bưu chính Viễn thông 9

Video and Audio

Học viện công nghệ Bưu chính Viễn thông 10

Học viện công nghệ Bưu chính Viễn thông 11

Ex: Responsive images

Học viện công nghệ Bưu chính Viễn thông 12

• HTML Link • Example MDN

Học viện công nghệ Bưu chính Viễn thông 13

Học viện công nghệ Bưu chính Viễn thông 14

thead, tfoot and tbody

Học viện công nghệ Bưu chính Viễn thông 15

colspan and rowspan

Học viện công nghệ Bưu chính Viễn thông 16

Học viện công nghệ Bưu chính Viễn thông 17

Basic sections of a documen

Học viện công nghệ Bưu chính Viễn thông 18

Học viện công nghệ Bưu chính Viễn thông 19

Học viện công nghệ Bưu chính Viễn thông 20

• can be paired with a specific form

Học viện công nghệ Bưu chính Viễn thông 21

Học viện công nghệ Bưu chính Viễn thông 22

Học viện công nghệ Bưu chính Viễn thông 23

Học viện công nghệ Bưu chính Viễn thông 24

Học viện công nghệ Bưu chính Viễn thông 25

Học viện công nghệ Bưu chính Viễn thông 26

Вам также может понравиться