Scribd
Upload
5 views

Lect 02-Set 372 - HTML 2

Uploaded by

shoroukkhaled37
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Lect 02-Set 372 - HTML 2

Uploaded by

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

Web Programming

Internet Application
02 Development

Dr. Fatma Sakr


2
HTML part 2: Chapter 3

 Use the textbook 1:

 Introduction to
the Development
of Web Applications
Using ASP .Net
(Core) MVC

 by Razvan Alexandru Mezei


HTML Elements

 An HTML page is a tree of html elements


Body Section

 <body bgcolor=“#FFFFFF” link="#C0C0C0" vlink="#808080"


alink="#FF0000“>
 attributes of body section :
 link
 vlink
 alink
 Bgcolor
 Background
 Bgproperties fixed
 Topmargin / leftmargin / bottommargin / rightmargin
Tags inside BODY SECTION
 Text
 Formatting • Background
 Resizing • Colors
 Layout • Images
 Listing
• Fixed Images
 Images
 Inserting images (GIF and jpg)
 Adding a link to an image
 Links • Tables
 To local pages
 To pages at other sites • Frames
 To bookmarks
TEXT FORMAT

<b>text</b> writes text as bold


<i>text</i> writes text in italics
<u>text</u> writes underlined text
<sub>text</sub> lowers text and makes it smaller
<sup>text </sup> lifts text and makes it smaller
<blink>text</blink> guess yourself! (Note: Netscape only.)
<strike>text</strike> strikes a line through the text
<pre>text</pre> writes text exactly as it is, including spaces.
makes text bold
<strong>text<strong>
TEXT SIZE
.

 These are the tags for changing the font size

<big>text</big> increase the size by one

<small>text</small> decrease the size by one

<h1>text</h1> writes text in biggest heading

<h6>text</h6> writes text in smallest heading

<font size="1">text</font> writes text in smallest font size. (8 pt)

<font size="7">text</font> writes text in biggest font size (36 pt)


TEXT LAYOUT

Adds a paragraph break after the text.


<p>text</p>
(2 linebreaks).
<p align="left">text</p> Left justify text in paragraph.
<p align="center">text</p> Center text in paragraph.
<p align="right">text</p> Right justify text in paragraph.
text<br> Adds a single line break where the tag is.
Turns off automatic line breaks
<nobr>text</nobr>
- even if text is wider than the window.
<center>text</center> Center text.
<div align="center">text</div> Center text.
<div align="left">text</div> Left justify text.
<div align="right">text</div> Right justify text.
3.1 Let’s Create Our First HTML Page

Fig. 3.1 A screenshot of how the H1 and P elements


will show in a browser
3.2 Add Titles, Paragraphs and Headings

Fig. 3.2 Shows how the page should be


displayed in a browser
Fig. 3.3 Shows how the page should be displayed in a browser.
Currently, it only contains one H1 element

3.3 Add a Second Webpage

Open this file in a browser and check that it looks like the
screenshot below (Fig. 3.3)
Cascaded Paragraphs
<html>
<head><title>Welcome onboard</title></head>
<body bgcolor=“#f4f4f4">
<h1>Welcome</h1>
<img src=“dcetech.gif" width=“222" height=“80" alt=“DCETECH" BORDER="0“ />
<h2>A Message from the Speaker </h2>
<p><font color=red>Good evening! Thank you for coming here!</font></p>
<p>Hello and welcome to Web technologies workshop! I'm <b> Ankit Jain,</b>, 4th
year Computer Engg <a href=“http://dcetech.com"> Head DCETECH.COM </a>.
Dcetech is a student portal and only one of its kind in India.It is not only a
technical oriented site which caters only for engineers but its for students
from any background! Also students from any educational institution can
register and join Dcetech. </p>
. . .
</body>
</html>
Turns into this…
3.4 Add Links and White Spaces to Our Pages

Fig. 3.4 Shows the page displayed in a browser. It contains an H1 element and three A
elements
non-breaking space
3.5 Add Images and White Spaces to Our Pages

The Output will be This output is true ?

Fig. 3.5 Shows how the page should show up in a browser


3.5 Add Images and White Spaces to Our Pages
3.5 Add Images and White Spaces to Our Pages

Fig. 3.6 Shows how the page should show up in a browser after we embedded an image. Note
the tooltip text shown as the mouse hovers over the image (this was set by the TITLE attribute
of the IMG element)
Fig. 3.7 This is the same as the above figure, but the underlying image was
removed. Note that the text “This is me, resting” is still included/displayed in the
page
3.6 Tables and Buttons
3.6 Tables and Buttons

The output will be

Fig. 3.8 Shows how an HTML table will look like in a browser
3.7 A Few Other HTML Elements We’ll Use Later

3.7.1 Label and Select Elements


3.7.1 Label and Select Elements Output

Fig. 3.9 Shows the same table as seen in Fig. 3.8, but with a newly added dropdown
list
3.7.2 Input Elements

the for attribute


specifies which
form element a
label is bound
to

Fig. 3.10 Shows several labels and input elements of various types (including
password, text, color, and file)
3.8 Form and More on Input Elements and Attributes

Input elements with variant data types

The output will be

Fig. 3.11 Shows a H1 element and a form containing four labels and input elements
The data type of input

submit = = button

Fig. 3.12 Shows the same elements as seen in Fig. 3.11, but with a newly added
input element (displayed as a button)
Added a Label and an Input Element of type Checkbox

checkbox

Fig. 3.13 To Fig. 3.12 we now added a label and an input element of
type checkbox
Fig. 3.14 If the user attempt to submit a form without a text in the password field (which
was set as required), then an error (“Please fill out this field”) will be displayed
3.9 GET Versus POST Request, the Action and the Method
Attributes
Questions
30

Thank You

Web Programming 26-Feb-24

You might also like