html
DESCRIPTION
HTML tutorial (Basics) language: EnglishTRANSCRIPT
AgendaWhat is HTML.
HTML Simple Example.!DOCTYPE.
title.h tag.p tag.Lists.
Attributes.Links.
Images.Lines.
Comments.Text format.
Tables.
HTMLHyper Text Markup Language
Markup Language
Set of markup tags
Tags
Keywords surrounded by angle brackets
Normally come in pairs
Start Tag
Opening Tags
<>
End Tag
Closing Tags
</>
HTML Basic Structure<!DOCTYPE html>
<html><head>
<title></title>
<head><body></body>
</html>
Simple Example
The <!DOCTYPE> Declarationhelps the browser to display a web
page correctly.
Page Titles
HTML Headings
Headings are
important
<h1> For most
importantheader
SE use your
headings
البحث مواقع تستخدمهاموقعك لفهرسة
<h1>………..<h6>
HTML Headings
HTML Paragraphs
Don't Forget the End Tag
النتيجة • نفس تعطى أن يمكن التاجز بعض
يكون ألنة األقفال تاج نضيف لم اذا حتى
أختياري.
ثم • ذلك على تعتمد أن تستطيع ال ولكنك
فيها مرغوب غير نتائج يعطي موقعك تجد
المتصفحات بعض .على
Lists
• The ul tag is used to define
unordered lists.
• The ol tag is used to define
ordered lists.
• Inside the lists, the li tag is used
to define each list item.
<ul> <li> </li> <li> </li> <li> </li></ul>
<ol> <li> </li> <li> </li> <li> </li></ol>
Lists
Unordered
Lists
ListsOrdered Lists
ListsSource Code
Result
HTML Attributes
• HTML elements can have att ributes.
• Att ributes provide additional information about
an element.
• Att ributes are always specified in the start tag.
Always Quote Att ribute Values = " value "
HTML Links
An anchor tag <a> is used to define a
link, but you also need to add the
destination of the link. The destination of the link is defi ned in the
href attribute of the tag.
The link can be absolute, such as:
"http://www.google.com", or it can be
relative to the current page.
HTML Links
<!DOCTYPE html> <html> <body>
<a href="http://www.yahoo.com"> link </a> </body> </html>< a href= "destination " target="_blank" > Visit this page
in a new tab </a>
Mailto link
To create a link on your Web site that
opens an email window .
<a href="mailto:e-mail">Send </a>
Send email to more than one address
<a href="mailto:e-mail1, e-mail2">Send </a>
HTML Images
<img
src="facebook.jpg">
img Tag
<img src="Destination" alt="Text" width= "Number" height= "Number" >
HTML Images
<img src="facebook.jpg" alt= "facebook
image" >Image source Alternate text
The alt attribute provides alternative information for an image if a user for some reason cannot view it .
Alternate Text
HTML Images
<img src="facebook.jpg" alt= "facebook
image" width="300" height=“500">
If the image cannot be displayed, the value of the alt attribute will be displayed
Width & Height
HTML Lines
The <hr> tag creates a horizontal line in HTML
Doc.
HTML Comments
مفيد ذلك و الكود لوصف التعليقات أدراج يمكن
كنت اذا خاصا� و جدا
مرة تعود سوف كنت اذا أو مجموعة في تعمل
الكود لتعديل .أخرى
<!-- -->
HTML Text Formatting
Often strong renders as bold<strong>............
</strong>
<b> …………………</b>
HTML Text Formatting
Often italic renders as emphasis<i>............ </i>
<em>
…………………</em>
HTML Text Formatting
Table DataTable rowTable
<table></table>
<tr>
</tr>
<td>
</td>
<td>
</td>
<tr>
</tr>
<td>
</td>
HTML Tables
HTML Tables
Table DataTable rowTable
<table></table>
<tr>
</tr>
100
200
<tr>
</tr>100
HTML Tables
Table DataTable rowTable
<table ></table>
<tr>
</tr>
row 1, cell 1
row 1, cell 2
<tr>
</tr>
row 2, cell 1
row 2, cell 2
HTML Tables
Table DataTable rowTable
<table border=“ ”></table>
<tr>
</tr>
row 1, cell 1
row 1, cell 2
<tr>
</tr>
row 2, cell 1
row 2, cell 2
HTML Tables
Table DataTable rowTable
<table border=“ ”></table>
<tr>
</tr>
row 1, cell 1
row 1, cell 2
<tr>
</tr>
row 2, cell 1
row 2, cell 2
HTML Tables
HTML Tables
HTML Tables
End of HTML Coding Part 1
Forms used to send data across the web and
are often used as contact forms to
convert information inputted by a user
into an email.
Extra
know
Visual Illusion
Extra
know
Visual Illusion
Extra