YOMEDIA
Web engineering: Lecture 7, 8, 9 - Majid Mumtaz
Chia sẻ: You You
| Ngày:
| Loại File: PDF
| Số trang:25
44
lượt xem
3
download
Download
Vui lòng tải xuống để xem tài liệu đầy đủ
Upon completion of this lesson, the successful participant will be able to: HTML Styling; HTML formatting; HTML Multimedia (Image media, audio, video tags); table tag, creation, usage; HTML Form tag; HTML Ifram; HTML color. Inviting you to refer.
AMBIENT/
Chủ đề:
Nội dung Text: Web engineering: Lecture 7, 8, 9 - Majid Mumtaz
- Web Engineering
Lecture 7-8-9
MAJID MUMTAZ
Department of Computer Science, CIIT Wah
1
- Week 4-5 lectures Agenda
• HTML Styling
• HTML formatting
• HTML Multimedia (Image media, audio, video tags)
• Table tag, creation, usage
• HTML Form tag
• HTML Ifram
• HTML color
2
- HTML – Hypertext Markup Language
(standard tags)
First Web Page Head Tag
HTML Tag
Body Tag
3
- HTML Styling
• Every HTML element has a default
style (background color is white and text color is
black). Changing the default style of an HTML
element, can be done with the style attribute.
Example
•
This is a heading
This is a paragraph.
Note: style="property:value"
4
- HTML Formatting Elements
• Formatting elements were designed to display
special types of text:
– Bold text-----------
– Important text------ and
– Italic text-----------
– Emphasized text-------
– Marked text (highlighted text)-------
– Small text----------------
– Deleted text----------
– Inserted text---------
– Subscripts-----------
– Superscripts---------
5
- HTML Multimedia
• Multimedia on the web, is sound, music, videos,
movies, and animations.
Examples: Pictures, music, sound, videos, records, films,
animations, and more.
Multimedia files also have their own formats and
different extensions like: .swf, .wav, .mp3, .mp4, .mpg,
.wmv, and .avi.
Common Video Formats (MP4)
MP4 is the new and upcoming format for internet video.
MP4 is recommended by YouTube.
MP4 is supported by Flash Players
MP4 is supported by HTML5.
6
- Examles video tag
Your browser does not support the video tag.
Note: The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes otherwise
video will flicker while loading on browser. The elements can link to
different video files. To start a video automatically use the autoplay attribute.
7
- HTML audio tag
Your browser does not support the audio element.
Note: The controls attribute adds audio controls, like play, pause, and volume.
Multiple elements can link to different audio files. The browser will use the
first recognized format.
Plug-ins can be added to web pages with the tag or the
tag. Examples of well-known plug-ins are Java applets. Plug-ins can be used for many
purposes: display maps, scan for viruses, verify your bank id, etc.
8
- HTML – Hypertext Markup Language
(cont.)
• HTML Tables
– Tables are defined with the tag.
– A table is divided into rows with the tag. (tr
stands for table row)
– A row is divided into data cells with the tag. (td
stands for table data)
– A row can also be divided into headings with
the tag. (th stands for table heading)
– The elements are the data containers in the
table.
– The elements can contain all sorts of HTML
elements like text, images, lists, other tables, etc.
9
- HTML – Hypertext Markup Language
(cont.)
• Table with a Border Attribute
•
Ali
Ahmed Ali Ahmed 50
50 Mohsin Ali 94
Mohsin
Ali
94
• Note: Border attribute is way out from HTML standard, its better to use CSS.
–
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
10
- HTML – Hypertext Markup Language
(cont.)
• Table with Cell Padding and Cell spacing
– Cell padding specifies the space between the cell
content and its borders.
– Cell spacing affects the amount of space between
cells. By default, many browsers draw tables with a
cell padding and cell spacing of two pixels.
th,td Ali Ahmed 50
{
padding:15px; Mohsin Ali 94
}
– rowspan attribute creates a cell that spans multiple
rows. The colspan attribute creates a cell that spans
multiple columns. i.e. Use the colspan attribute to
make a cell span many columns 11
- HTML – Hypertext Markup Language
(cont.)
• Table Headings
– Table headings are defined with the tag
– By default, all major browsers display table headings as
bold and centered: Students Detail
– Table captions tell your Firstname Lastname Points
visitor what the table
is for i.e. Ali Ahmed 50
Mohsin Ali 94
Students Detail
12
- HTML – Hypertext Markup Language
(cont.)
• HTML Forms
– HTML forms are used to pass data to a server. It contains input elements like
text fields, checkboxes, radio-buttons, submit buttons, select lists, textarea,
fieldset, legend, and label elements.
– Form tag syntax
.
input elements
.
– Two important attributes for form tag are
• Action: attribute specifies the URL to the server-side script (including the filename) that
will process the form when it's submitted.
• method : accept one of two possible values: post or get
– post method includes the form data in the body of the form and sends it to the web server
– get method appends the data to the URL specified in the action attribute and most often is
used in searches.
13
- HTML – Hypertext Markup Language
(cont.)
• HTML Forms - The Input Element
– important form element is the element. It is used
to select user information. It varies, And element
can be of type text field, checkbox, password, radio
button, submit button, and more.
– Text Fields
defines a one-line input field that a
user can enter text into: e.g.
First name:
Last name:
14
- HTML – Hypertext Markup Language
(cont.)
• HTML Forms - The Input Element
– Password Field
e.g. defines a password
field:
Password:
15
- HTML – Hypertext Markup Language
(cont.)
• HTML Forms - The Input Element
– Radio Buttons
defines a radio button. Radio
buttons let a user select ONLY ONE of a limited
number of choices: e.g.
Male
Female
16
- HTML – Hypertext Markup Language
(cont.)
• HTML Forms - The Input Element
– Checkboxes
defines a checkbox.
Checkboxes let a user select ZERO or MORE options of
a limited number of choices. E.g.
I have a bike
I have a car
17
- HTML – Hypertext Markup Language
(cont.)
• HTML Forms - The Input Element
– Submit Button
defines a submit button. It is
used to send form data to a server. The data is sent to
the page specified in the form's action attribute. E.g.
Username:
18
- HTML – Hypertext Markup Language
(cont.)
• Creating Large Text-Entry Fields with textarea
– Wah
Cantt Rawalpindi
Islamabad
Islamabad
19
- HTML – Hypertext Markup Language
(cont.)
• HTML Iframes
– An iframe is used to display a web page within a web
page. The syntax would be
– Set Height and Width
• The height and width attributes are used to specify the
height and width of the iframe. E.g.
page1.htm
20
Thêm tài liệu vào bộ sưu tập có sẵn:
Báo xấu
LAVA
ERROR:connection to 10.20.1.98:9315 failed (errno=111, msg=Connection refused)
ERROR:connection to 10.20.1.98:9315 failed (errno=111, msg=Connection refused)
Đang xử lý...
Thêm vào BST
Báo xấu
