Learning html http www w3schools com
Download
1 / 80

Learning HTML w3schools - PowerPoint PPT Presentation


  • 187 Views
  • Uploaded on

Learning HTML http://www.w3schools.com. SWE 444 . Internet and Web Application Development. Dr. Ahmed Youssef. Introduction. HTML is a language for describing web pages. HTML stands for  H yper  T ext  M arkup  L anguage HTML is not a programming language, it is a  markup language

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Learning HTML w3schools' - bell


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Learning html http www w3schools com

Learning HTMLhttp://www.w3schools.com

SWE 444

Internet and Web Application Development

Dr. Ahmed Youssef


Introduction
Introduction

HTML is a language for describing web pages.

  • HTML stands for Hyper Text Markup Language

  • HTML is not a programming language, it is a markup language

  • A markup language is a set of markup tags

  • HTML uses markup tags to describe web pages

Ahmed Youssef:: SWE444: Internet and Web Application Development


Html tags
HTML Tags

  • HTML tags are keywords surrounded by angle brackets like <html>

  • HTML tags normally come in pairs like <b> and </b>

  • The first tag in a pair is the start tag, the second tag is the end tag

Ahmed Youssef:: SWE444: Internet and Web Application Development


Learning html w3schools

Web Page


Html basic document
HTML Basic Document

<html><head><title>Title of document goes here</title></head>

<body> Visible text goes here…</body>

</html>

Ahmed Youssef:: SWE444: Internet and Web Application Development


Example explained
Example Explained

  • The text between <html> and </html> describes the web page

  • The text between <body> and </body> is the visible page content

  • The text between <h1> and </h1> is displayed as a heading

  • The text between <p> and </p> is displayed as a paragraph

Ahmed Youssef:: SWE444: Internet and Web Application Development


Heading elements
Heading Elements

<h1>Largest Heading</h1>

<h2> . . . </h2> <h3> . . . </h3> <h4> . . . </h4> <h5> . . . </h5>

<h6>Smallest Heading</h6>

Ahmed Youssef:: SWE444: Internet and Web Application Development


Heading elements1
Heading Elements

<html>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

</body>

</html>


Paragraphs
Paragraphs

Paragraphs are defined with the <p> tag.

<html>

<body>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

</body>

</html>

Ahmed Youssef:: SWE444: Internet and Web Application Development


Html links
HTML Links

HTML links are defined with the <a> tag.

The href attribute specifies the destination of a link.

Example

<html>

<body>

<a href="http://www.w3schools.com">

This is a link</a>

</body>

</html>

Ahmed Youssef:: SWE444: Internet and Web Application Development


Html comments
HTML Comments

  • Comments can be inserted into the HTML code to make it more readable and understandable.

  • Comments are ignored by the browser and are not displayed.

  • Comments are written like this:

    <!-- This is a comment -->

Ahmed Youssef:: SWE444: Internet and Web Application Development


Html lines
HTML Lines

  • The <hr /> tag creates a horizontal line in an HTML page.<html>

    <body>

    <p>The hr tag defines a horizontal rule:</p>

    <hr />

    <p>This is a paragraph</p>

    <hr />

    <p>This is a paragraph</p>

    <hr />

    </body>

    </html>

Ahmed Youssef:: SWE444: Internet and Web Application Development


Html line breaks
HTML Line Breaks

  • Use the <br /> tag if you want a line break (new line) without starting a new paragraph

  • Example

    <html>

    <body>

    <p>Welcome in Hail </p>

    <p>Welcome<br />in <br />Hail</p>

    </body>

    </html>

Ahmed Youssef:: SWE444: Internet and Web Application Development


Html text formatting
HTML Text Formatting

Ahmed Youssef:: SWE444: Internet and Web Application Development


Exapmle
Exapmle

<html>

<body>

<p><b>This text is bold</b></p>

<p><strong>This text is strong</strong></p>

<p><i>This text is italic</i></p>

<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>

</html>


Preserving whitespace
Preserving Whitespace

<pre>

class Foo

{

static void main(string[] args)

{

return;

}

}

</pre>

vs


Html images
HTML Images

In HTML, images are defined with the <img> tag.

To display an image on a page, you need to use the src attribute.

<imgsrc="/images/pulpit.jpg" border=“0" width="304" height="228" />

Ahmed Youssef:: SWE444: Internet and Web Application Development


Images
Images

  • WIDTH="..." The width in pixels of an image.

  • HEIGHT="..." The height in pixels of the image.

  • BORDER="..." Creates a border around image.

Ahmed Youssef:: SWE444: Internet and Web Application Development


Learning html w3schools

(Relative) URL

of the binary

image file

<img src="../images/bird.jpg"

alt="Magpie picture"

width="200px"/>

Alternative text

to be displayed

if the image can't

be displayed

width and/or height

attributes used to

scale the rendered

size of the image

Ahmed Youssef:: SWE444: Internet and Web Application Development


Html lists
HTML Lists

Ordered list:

  • The first list item

  • The second list item

  • The third list item

Unordered list:

  • List item

  • List item

  • List item

Definition Lists

list of items, with a description of each item.

Coffee

- black hot drink

Milk

- white cold drink


Html list tags

HTML List Tags

HTML List Tags


Lists
Lists

Unordered Lists

<ul>

<li>First Item</li>

<li>Another item</li>

</ul>

Ordered Lists

<ol>

<li>First Item</li>

<li>Second Item</li>

</ol>

Definition Lists

<dl>

<dt>job</dt>

<dd>a piece of work</dd>

<dt>spade</dt>

<dd>a tool for digging</dd>

</dl>


Numbered list
Numbered List

<html>

<body>

<h4>Numbered list:</h4>

<ol>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

</html>

</body>

Ahmed Youssef:: SWE444: Internet and Web Application Development


Learning html w3schools

<h4>Letters list:</h4>

<ol type="A">

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

<h4>Lowercase letters list:</h4>

<ol type="a">

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

Ahmed Youssef:: SWE444: Internet and Web Application Development


Learning html w3schools

<h4>Roman numbers list:</h4>

<ol type="I">

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

<h4>Lowercase Roman numbers list:</h4>

<ol type="i">

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

Ahmed Youssef:: SWE444: Internet and Web Application Development


Different types of unordered lists
Different types of unordered lists

<html>

<body>

<h4>Disc list:</h4>

<ul type="disc">

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ul>

</html>

</body>


Learning html w3schools

<h4>Circle bullets list:</h4>

<ul type="circle">

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ul>

<h4>Square bullets list:</h4>

<ul type="square">

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ul>


Html tables
HTML Tables

  • Tables are defined with the <table> tag.

  • A table is divided into

    • rows (with the <tr> tag),

      • data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell.

      • <td> tag can contain text, links, images, lists, forms, other tables, etc.


Example
Example

<table border="1"><tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td></tr><tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td></tr></table>


Html table headers
HTML Table Headers

<table border="1"><tr> <th>Header 1</th> <th>Header 2</th></tr><tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr><tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td></tr></table>


Vertical headers
Vertical Headers

<table border="1">

<tr>

<th>First Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

<th>Telephone:</th>

<td>555 77 854</td>

</tr>

<tr>

<th>Telephone:</th>

<td>555 77 855</td>

</tr>

</table>


Tables
Tables

<table border="2">

<caption>Fruit Juice Drinks</caption>

<tr>

<th></th>

<th> Apple </th>

<th> Orange </th>

</tr>

<tr>

<th> Breakfast </th>

<td> 0 </td>

<td> 1 </td>

</tr>

<tr>

<th> Lunch </th>

<td> 1 </td>

<td> 2 </td>

</tr>

</table>


Html styles background color

HTML List Tags

HTML Styles - Background Color

<html> <body style="background-color:yellow"> <h2 style="background-color:red">This is a heading</h2> <p style="background-color:green">This is a paragraph.</p> </body></html>

Ahmed Youssef:: SWE444: Internet and Web Application Development


Html style font color and size
HTML Style Font, Color and Size

<h1 style="font-family:verdana">A heading</h1>

<p style="font-family:arial;color:red;font- size:20;"> A paragraph.</p>

Ahmed Youssef:: SWE444: Internet and Web Application Development


Html style text alignment
HTML Style - Text Alignment

<h1 style="text-align:center">This is a heading</h1>

<p>The heading above is aligned to the center </p>

Ahmed Youssef:: SWE444: Internet and Web Application Development


Html forms
HTML Forms

HTML forms are used to pass data to a server.

A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more.

A form can also contain select lists, textarea, fieldset, legend, and label elements.



Html forms1
HTML Forms

The <form> tag is used to create an HTML form:

<form> .input elements . </form>


Html forms the input element
HTML Forms - The Input Element

  • The input element is used to select user information.

  • An input element can be of type

    • text field,

    • checkbox,

    • password,

    • radio button,

    • submit button,

    • and more.

      type = text|password|checkbox|radio|submit| reset|button


Text field
Text Field

<form> First name: <input type="text" name="firstname" /><br />

Last name: <input type="text" name="lastname" /></form>


Password field
Password Field

<form> Password: <input type="password" name="pwd" /></form>


Radio buttons
Radio Buttons

<input type="radio" /> defines a radio button.

Radio buttons let a user select ONLY ONE of a limited number of choices:

<form><input type="radio" name=“Gender" value="male" /> Male<br /><input type="radio" name=" Gender " value="female" /> Female</form>


Submit button
Submit Button

A submit button is used to send form data to a server. 

<form>

Username: <input type="text" name="user" />

<input type="submit" value="Submit" />

</form>


Checkboxes
Checkboxes

User can select ONE or MORE options

<form> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /> <input type="checkbox" name="vehicle" value="Car" /> I have a car </form>


Drop down list
Drop-Down List

<form >

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

</form>


Text area
Text-area

To create a multi-line text input control.

User can write an unlimited number of characters.

<textarea rows="10" cols="30">

The cat was playing in the garden.

</textarea>


Create a button
Create a button

<form >

<input type="button" value="Hello world!">

</form>

Ahmed Youssef:: SWE444: Internet and Web Application Development


Last lecture
Last Lecture

  • List

  • Table

  • Styles

  • Forms

Ahmed Youssef:: SWE444: Internet and Web Application Development


Html forms the input element1
HTML Forms - The Input Element

used to select user information.

type = text | password | checkbox | radio | submit | reset | button


Text area1
Text-area

To create a multi-line text input control.

User can write an unlimited number of characters.

<textarea rows="10" cols="30">

The cat was playing in the garden.

</textarea>


Fieldset
Fieldset

Used to logically group together elements in a form.

To draws a box around the related form elements.


Fieldset example
Fieldset - Example

<form>

<fieldset>

Name: <input type="text" size="30" /><br />

Email: <input type="text" size="30" /><br />

Date of birth: <input type="text" size="10" />

</fieldset>

</form>


Legend
Legend

Defines a caption for the fieldset element

<form>  <fieldset>    <legend align="right">Information:</legend>    Name: <input type="text" size="30" /><br />    Email: <input type="text" size="30" /><br />    Date of birth: <input type="text" size="10" />  </fieldset></form>


Drop down list1
Drop-Down List

<form >

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

</form>


Create a button1
Create a button

<form >

<input type="button" value= " I Agree">

</form>

Ahmed Youssef:: SWE444: Internet and Web Application Development

55


Create a button2
Create a button

<button type="button">I Agree!</button>


Html frames
HTML Frames

With frames, you can display more than one HTML document in the same browser window.


The html frameset element
The HTML frameset Element

The frameset element holds one or more frame elements.

The frameset element states

HOW MANY columns or rows

HOW MUCH percentage/pixels of space will occupy each of them.


Vertical frameset
Vertical Frameset

<frameset cols="25%,50%,25%">

<frame src="frame_a.htm" />

<frame src="frame_b.htm" />

<frame src="frame_c.htm" />

</frameset>


Frame a htm
frame_a.htm

<html>

<body style="background-color: red" > <h3>Frame A</h3>

</body>

</html>


Frame b htm
frame_b.htm

<html>

<body style="background-color: green" >

<h3>Frame B</h3>

</body>

</html>


Frame c htm
frame_c.htm

<html>

<body style="background-color: blue" > <h3>Frame C</h3>

</body>

</html>


Horizontal frameset
 Horizontal Frameset

<frameset rows="25%, *, 25%">

<frame src="frame_a.htm" />

<frame src="frame_b.htm" />

<frame src="frame_c.htm" />

</frameset>


Nested framesets
Nested Framesets

<frameset rows="50%,50%">

<frame src="frame_a.htm" />

<frameset cols="25%,75%">

<frame src="frame_b.htm" />

<frame src="frame_c.htm" />

</frameset>

</frameset>


Tryhtml contents htm
tryhtml_contents.htm

<body>

<a href ="frame_a.htm" target ="showframe">Frame a</a>

<br />

<a href ="frame_b.htm" target ="showframe">Frame b</a>

<br />

<a href ="frame_c.htm" target ="showframe">Frame c</a>

</body>


Navigation frame
Navigation Frame

<frameset cols="120,*">

<frame src="tryhtml_contents.htm" />

<frame src="frame_a.htm" name="showframe" />

</frameset>


Frameset with noresize
Frameset with noresize

<frameset rows="50%,50%">

<frame noresize="noresize" src="frame_a.htm" />

<frame noresize="noresize" src="frame_b.htm" />

</frameset>



What is xhtml
What Is XHTML?

Stands for eXtensible HyperText Markup Language

XHTML is a combination of HTML and XML

XHTML is almost identical to HTML 4.01

XHTML is a stricter and cleaner version of HTML

XHTML is a W3C Recommendation

 All browsers support XHTML


Bad html
Bad HTML

<html> <head> <title>This is bad HTML</title>

<body> <h1>Bad HTML <p>This is a paragraph </body>

Why?


Differences between xhtml and html
Differences Between XHTML and HTML

XHTML elements must be properly nested

XHTML elements must always be closed

XHTML elements must be in lowercase

XHTML documents must have one root element


Xhtml elements must be properly nested
XHTML elements must be properly nested

<ul>  <li>Coffee</li>  <li>Tea    <ul>      <li>Black tea</li>      <li>Green tea</li>    </ul>  <li>Milk</li></ul>

<ul>  <li>Coffee</li>  <li>Tea    <ul>      <li>Black tea</li>      <li>Green tea</li>    </ul></li>  <li>Milk</li></ul>


Xhtml elements must always be closed
XHTML Elements Must Always Be Closed

<p>This is a paragraph</p> <p>This is another paragraph</p>

<p>This is a paragraph <p>This is another paragraph


Learning html w3schools

Attribute Names Must Be In Lower Case

  • This is wrong:

    • <table WIDTH="100%">

  • This is correct:

    • <table width="100%">

      Attribute Values Must Be Quoted

  • This is wrong:

    • <table width=100%>

  • This is correct:

    • <table width="100%">


Mandatory xhtml elements
Mandatory XHTML Elements

All XHTML documents must have:

a DOCTYPE declaration.

The html,

head,

title,

and body


Mandatory xhtml elements1
Mandatory XHTML Elements

<!DOCTYPE ...> <html> <head> <title>... </title> </head> <body> ... </body> </html>


Html document type declarations
HTML Document Type Declarations

  • XHTML 1.0 Strict:<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  • XHTML 1.0 Frameset:<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN“"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

  • HTML 4.01 Transitional:<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“"http://www.w3.org/TR/html4/loose.dtd">


The 3 document type definitions
The 3 Document Type Definitions

  • XHTML 1.0 Strict

    • Use this when you want really clean markup, free of presentational clutter. Use this together with Cascading Style Sheets.

  • XHTML 1.0 Transitional

    • Use this when you need to take advantage of HTML's presentational features and when you want to support browsers that don't understand Cascading Style Sheets.

  • XHTML 1.0 Frameset

    • Use this when you want to use HTML Frames to partition the browser window into two or more frames.

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

SWE 444: Internet & Web Application Development


A minimum xhtml document template
A Minimum XHTML Document Template

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>... </title>

</head>

<body> ... </body>

</html>

SWE 444: Internet & Web Application Development


An xhtml example
An XHTML Example

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > <head> <title>simple document</title> </head> <body> <p>a simple paragraph</p> </body></html>