Scribd
Upload
31 views

03 HTML Basics

Uploaded by

vc.edutron
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
31 views

03 HTML Basics

Uploaded by

vc.edutron
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 50

Client-Side Internet and Web Programming

Adding a Content
CHAPTER 3

LOGO
Contents

3.1 Working With Text


3.2 Page Formatting
3.3 Adding Images
3.4 Creating Links

2
3.1 Working With Text
Headings
❖ Headings are used to define the headers of the HTML
document
❖ HTML offers six different levels of headings.
▪ <h1>..</h1>
▪ <h2>..>/h2>
▪ <h3>..</h3>
▪ <h4>..</h4>
▪ <h5>..</h5>
▪ <h6>..</h6>
❖ While <h1> defines the largest (most important) heading,
<h6> defines the smallest (least important) heading.
❖ Browsers automatically add some white space (a margin)
before and after a heading.
❖ Search engines use the headings to index the structure and
3 content of your web pages.
3.1 Working With Text
Headings
Example Output

<!DOCTYPE html>
<html>
<body>

<h1>ITEC229</h1>
<h2>ITEC229</h2>
<h3>ITEC229</h3>
<h4>ITEC229</h4>
<h5>ITEC229</h5>
<h6>ITEC229</h6>

</body>
</html>

Note: Use HTML headings for headings only.


Don't use headings to make text BIG or bold.
4
3.1 Working With Text
Paragraphs
❖ <p>..</p> tags used to define a paragraph in HTML
document
❖ Browsers automatically add some white space (a margin)
before and after a paragraph.

Example Output
<!DOCTYPE html>
<html>
<body>

<p>This is the 1. paragraph.</p>


<p> And this is the 2. paragraph.</p>

</body>
</html>

5
3.1 Working With Text
Text Formatting Elements
❖ Formatting elements were designed to display special types of
text:
▪ <b> - Bold text, without any extra importance
▪ <strong> - Important text, with added semantic "strong" importance
▪ <i> - Italic text, without any extra importance
▪ <em> - Emphasized text, with added semantic importance
▪ <u> - Represents some text that should be stylistically different from
normal text, such as misspelled words
▪ <ins> - Inserted text Note:
▪ <mark> - Marked text Browsers display <strong> as <b>,
▪ <small> - Small text and <em> as <i>. However, there is a
difference in the meaning of these
▪ <del> - Deleted text tags: <b> and <i> defines bold and
▪ <sub> - Subscript text italic text, but <strong> and <em>
means that the text is "important".
▪ <sup> - Superscript text
6
3.1 Working With Text
Text Formatting Elements
Example Output

<DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

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


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

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


<p>This text is <em>emphasized.</em></p>

<p>This text is <u>misspselled.</u></p>


<p>This text is <ins>inserted.</ins></p>

</body>
</html>

7
3.1 Working With Text
Text Formatting Elements
Example Output

<!DOCTYPE html>
<html>
<body>

<p>This text is <mark>Marked</mark> or


<mark>Highlighted</mark></p>

<p>This is a <small>Small
Text</small></p>

<p>This text is <del>Removed</del> or


<del>Deleted</del></p>

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


<sup>superscript</sup></p>

</body>
</html>
8
3.1 Working With Text
Font, Size and Color of a Text (HTML4 !!!)
❖ The <font> tag specifies the font face, font size, and color of
text.
❖ Face, Size and Color are the attributes of the <font> tag.
❖ Face;
▪ Font of the text you are formatting
▪ Be careful to use common fonts like Times, Arial, Verdana
▪ Browser will display the text in a default font if it is unable
to display specified font
❖ Size;
▪ Specifies the size of the text inside a <font> element
▪ Default text size is 3 (16px) for the browser
▪ To make text larger, set size to 4/5/6/7

9
▪ To make text smaller, set size to 2/1/-1/-2
3.1 Working With Text
Font, Size and Color of a Text (HTML4 !!!)
❖ Color;
▪ Specifies the color of the text inside a <font> element.
▪ <font color="color_name/hex_number/rgb_number">

Attribute Values
Value Description
color_name Specifies the text color with a color name
(like "red")
hex_number Specifies the text color with a hex code (like
"#ff0000")
rgb_number Specifies the text color with an rgb code
(like "rgb(255,0,0)")

!!! The <font> tag and its face, size and color attributes
are not supported in HTML5. Use CSS instead.
10
3.1 Working With Text
Font, Size and Color of a Text (HTML4 !!!)
Example
<!DOCTYPE html>
<html>
<body>

<P><FONT COLOR="purple" SIZE="5" FACE="Arial">This text is larger and


purple.</FONT></P>

<P>This is a text in a default font, size and color. </P>

<P><FONT COLOR="green" SIZE="1" FACE="Verdana">This text is smaller


and green.</FONT></P>

<P><FONT COLOR="red" SIZE="6" FACE="Helvatica">


<strong>Note:</strong>The font element is not Supported in HTML5. Use
CSS instead.</P>

</body>
</html>
11
3.1 Working With Text
Font, Size and Color of a Text (HTML4 !!!)

Output

12
3.1 Working With Text
Alignment of a Text (HTML4 !!!)
❖ <CENTER> tag used for centering the text on the page.
❖ The align attribute specifies the alignment of the text

Attribute Values
Value Description
left Left-align text
right Right-align text
center Center-align text
justify Stretches the lines so that each line has
equal width

!!! The <CENTER> tag and ALIGN attribute are not


supported in HTML5. Use CSS instead.
13
3.1 Working With Text
Alignment of a Text (HTML4 !!!)
Example
<!DOCTYPE html>
<html>
<body>
<CENTER><H2>This header is CENTERED.</H2></CENTER>

<H3 align="left">This header is LEFT-aligned.</H3>

<H4 align="right">This header is RIGHT-aligned.</H4>

<P align="center">This paragraph is CENTER-aligned.</P>

<P align="justify">This paragraph is JUSTIFIED. This paragraph is JUSTIFIED.


This paragraph is JUSTIFIED. This paragraph is JUSTIFIED.This paragraph is
JUSTIFIED. This paragraph is JUSTIFIED. This paragraph is JUSTIFIED. This
paragraph is JUSTIFIED. This paragraph is JUSTIFIED. This paragraph is
JUSTIFIED. This paragraph is JUSTIFIED. </P>
</body>
</html>
14
3.1 Working With Text
Alignment of a Text (HTML4 !!!)

Output

!!! The <CENTER> tag and ALIGN attribute are not


supported in HTML5. Use CSS instead.
15
3.1 Working With Text
Special Characters (Symbol Entities)
❖ There are times when it becomes necessary to display
characters and symbols that are not available on a standart
keyboard such as copyright sign or that have special meaning
in HTML (<,>, &, etc.)
❖ To accomplish this, HTML uses Special Character Entity tag.
❖ To add such symbols to an HTML page, you can use an HTML
entity name.
❖ If no entity name exists, you can use an entity number, a
decimal, or hexadecimal reference.
❖ The tag takes the format of an ampersand (&), followed by
the name/code and a semicolon.
❖ There are literally hundreds of special charactes entities
currently available.
16
3.1 Working With Text
Special Characters (Symbol Entities)
❖ A few of the more common character entities are listed below;
Symbol Description Entity Name Entity Number
non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
" double quotation mark &quot; &#34;
' single quotation mark &apos; &#39;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
€ euro &euro; &#8364;
17
3.1 Working With Text
Special Characters (Symbol Entities)
Symbol Description Entity Name Entity Number
© copyright &copy; &#169;
® registered trademark &reg; &#174;
¼ fraction one quarter &frac14; &#188;
½ fraction one half &frac12; &#189;
¾ fraction three quarters &frac34; &#190;

❖ Be carefull!!! Entity names are case sensitive.


❖ Advantage of using an entity name: An entity name is easy to
remember.
❖ Disadvantage of using an entity name: Browsers may not
support all entity names, but the support for numbers is good.

18
3.2 Page Formatting
Adding a Line Break
❖ By default, browsers ignore many formatting keystrokes
that we take for granted.
❖ Exaples include the "Enter" and "Tab" keys and multiple
uses of the spacebar.
❖ To accomplish the same tasks in HTML, page formatting
tags are used.
❖ Web browsers wrap text automatically to the next line
when the current line reaches the right side of the browser.
❖ If you want to avoid wrapping and begin text on a new line
<BR> tag sould be used.
❖ The <BR> tag doesn’t have an end tag.
❖ Additional lines between paragraphs can also be added by
using <BR> tag.
❖ Each tag creates another blank line.
19
3.2 Page Formatting
Adding a Line Break
Example
<!DOCTYPE html>
<html>
<body>
ITEC229
Client-Side Internet and Web Programming<br><br>

ITEC229 <br> Client-Side Internet and Web Programming

<p>ITEC229 <br> Client-Side Internet and Web Programming</p>


</body>
</html>
Output

20
3.2 Page Formatting
Inserting Blank Space
❖ Any blank spaces that you type in your text (beyond a
single space between words) are ignored by browser.
❖ You must code your desired blank spaces into your
document.
❖ You must use the entity &nbsp; for each space you wish to
add.
❖ For example, if you want to add multiple spaces between
specific words, type in the appropriate amount of entities
without any spaces between them.

21
3.2 Page Formatting
Inserting Blank Space
Example
<!DOCTYPE html>
<html>
<body>

<p>ITEC 229</p>

<p>This would add five blank &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; spaces</p>

</body>
</html>

Output

22
3.2 Page Formatting
Preformatted Text
❖ The <pre>..</pre> tags allow you to maintain the integrity
of the spacing and formatting of your text so that browsers
will display it as you have typed it.
❖ If you want to avoid some of the repetitive coding that
comes with multiple spacing in your document, you can use
the preformatted tags <pre>..</pre>.

23
3.2 Page Formatting
Preformatted Text
Example
<!DOCTYPE html>
<html>
<body>
<p>ITEC229: Client-Side Internet and Web Programming</p>
<pre>
ITEC229: Client-Side Internet and Web Programming<br>
ITEC230: Rich Internet Applications (RIA) Development<br>
ITEC327: Server-Side Internet and Web Programming<br>
</pre>
</body>
</html>
Output

24
3.2 Page Formatting
Page’s Background, Text and Link Color (HTML4 !!!)
❖ By default, the backround color of HTML pages are white,
text color is black and link color is blue.
❖ To change the background color, place the bgcolor attribute
within the <body> start tag of the page:<body bgcolor=" "
>
❖ For very basic colors, color names can be used. For other
colors HTML coding uses hexadecimal values to assign colors.
Hexadecimal are assigned by typing a number sign (#)
followed by a six character value.
❖ To change the default text color for a document use text
attribute within the <body> tag: <body text=" " >
❖ To change the default (unvisited) link color for a document
use link attribute within the <body> tag: <body link=" " >
!!! The bgcolor, text and link attributes are not supported
25
3.2 Page Formatting
Page’s Background, Text and Link Color (HTML4 !!!)
Example
<!DOCTYPE html>
<html>
<body bgcolor="lightyellow" text="lightgreen" link="pink">
<h1>ITEC229</h1>
<p>Client-Side Internet and Web Programming.</p>
<p><a href="https://staff.emu.edu.tr/raygankansoy">Visit ITEC229 Web
Site!</a></p>
<p><font color="red">The <strong>bgcolor</strong>, <strong>text</strong> and
<strong>link</strong> attributes are not supported in HTML5. Use CSS instead.
</font></p>
</body>
</html>
Output

26
3.2 Page Formatting
Page’s Background Image (HTML4 !!!)
❖ For adding a background image to the HTML page,
background attribute is used within the <body> tag:
<body background=" " >
Example
<!DOCTYPE html>
<html>
<head>
<title>Adding a Background Image</title>
</head>

<body background="bgimage.jpg">

</body>
</html>

!!! The background attrribute is not supported in HTML5.


Use CSS instead.
27
3.2 Page Formatting
<DIV> and <SPAN> Elments

❖ The <div> tag defines a division or a section in an HTML


document.
❖ <div> tag is used to group block-elements to format them
with CSS.
❖ Block-level elements (such as section, div, h1, p) render
with a line break before and after their content.
❖ By default, browsers always place a line break before and
after the <div> element.
❖ Align attribute specifies the alignment of the content inside
a <div> element but not supported in HTML5.

28
3.2 Page Formatting
<DIV> and <SPAN> Elments
❖ The <span> tag is used to group inline-elements in a
document.
❖ Inline-level elements does not change the flow of elements
in the document.
❖ Examples of inline elements include span, img, a, em and
strong.
❖ By default, <span> does not apply any formatting to its
contents and provides no visual change by itself.
❖ The <span> tag provides a way to add a hook to a part of
a text or a part of a document.
❖ Its primary purpose is to apply CSS rules or id attributes to
a section of text.

29
3.2 Page Formatting
<DIV> and <SPAN> Elments
Example
<!DOCTYPE html>
<html>
<body>

ITEC229:Client-Side
<span style="color:blue; font-weight:bold"> Internet </span> and
<span style="color:blue; font-weight:bold"> Web </span>Programming.

<div style="color:blue; font-weight:bold"> ITEC229 </div> Client-Side Internet


and Web Programming

</body>
</html>
Output

30
3.2 Page Formatting
Horizontal Lines
❖ Horizontal line (sometimes called horizontal rule) is used to
break up information or add visual interest to web pages.
❖ To insert a horizonntal line, place the <HR> tag where you
want the line to appear in the document. There is no end
(closing) tag of <HR>.
❖ In HTML5, the <HR> still display a horizontal line in visual
browsers, but it is more commonly used as a themeatic
break at the paragraph level.
❖ <HR> attributes: (are not supported in HTML5!!!)
▪ Width: Adjusts the width of the rule – Either a number in pixels
or a percentage.
▪ Size: Determines the height of the horizontal rule in pixels.
▪ Align: Either left, right or center.
▪ Noshade:Eliminates default shading effect and displays
31
horizontal rule as a solid-color bar.
3.2 Page Formatting
Horizontal Lines
Example
<!DOCTYPE html>
<html>
<body>

<HR><HR width="80%" size="3">


<HR width="80%" size="4"><HR width="80%" size="5">

<P align="left"><strong>Size:</strong>4 &nbsp; <strong>Width:</strong>75%


<HR width="75%" size="6" align="left">

<P align="right"><strong>Size:</strong>12 &nbsp;<strong>Width:</strong>25%


<HR width="25%" size="12" align="right">

<P align="center"><strong>Size:</strong>8
&nbsp;<strong>Width:</strong>50%
<strong><em> &nbsp; No shade...</em></strong>
<HR NOSHADE width="50%" size="8" align="center">

</body>
</html>
32
3.2 Page Formatting
Horizontal Lines

Output

33
3.3 Adding IMAGES

❖ Images are a good way to add interest to wepages and come


in different forms such as photographs and graphics.
❖ There are many different file types used for images in
wepages, the most commmon being;
▪ GIF: most commonly used for simple, less-detailed
images, such as graphics, logos, etc. (supports 256
colors). Also used to display short, simple animations.
▪ JPEG: or JPG forshort supports literally millions of colors
(called 24 biit) and is the format used when the image is
complex , such as phptpgraphs and other detaill-rch
images.
▪ PNG: combines 24 bit support of JPG with advanced
compression capabilities.
❖ The <img> tag is used for adding an image in to a HTML
34 document.
3.3 Adding IMAGES

❖ The <img> tag has one required (src) and some optional
attributes;
Attribute Value Description
src name/url Specifies the name/url of an image
alt text Specifies an alternate text for an image
width pixels Specifies the width of an image
height pixels Specifies the height of an image
border pixels Specifies the width of the border around
an image
Not supported in HTML5.
align left, center, Specifies the alignment of an image
right Not supported in HTML5.

❖ The <img> tag has no end (closing) tag.


35
3.3 Adding IMAGES

Examples
<!DOCTYPE html>
<html>
<body>

<img src="raygan.jpg">
<img src="raygan.jpg" alt="Raygan Kansoy">
<img src="raygan.jpg" alt="Raygan Kansoy" border="2" align="center">

<img src="logo.gif">
<img src="logo.gif" alt="EMU">
<img src="logo.gif" alt="EMU" width="150" height="150" align="right">

<img src="http://www.example.com/image.gif">
<!-- points to an image on another web site -->

<img src="images/image.gif">
<!-- points to an image in a folder -->

</body>
</html>
36
3.4 Creating LINKS
Hyperlinks
❖ A link to an internal page on the same website, or to an external
page on the web, is called an hyperlink.
❖ Hyperlink is a pointer from one HTML document to another one,
the destination may be the another page on the same website or
some other page on the WWW.
❖ The <a> tag is used to define links in HTML, while the "href"
attribute is used to specify the URL (destination) you would like
to link to.
❖ The <a href=" "> tag is followed by the text that will be
displayed to the user as Hypertext and then terminated with the
</a> tag.
❖ Web browsers typically underline text hyperlinks and color their
text blue by default so that users can distinguish hyperlinks from
plain text.
❖ A link does not have to be text. It can be an image or any other
HTML element. Any displayed element can act as a hyperlink.
37
3.4 Creating LINKS
Hyperlinks
Examples
<!DOCTYPE html>
<!-- Linking to other web pages. -->
<html>
<head>
<meta charset = "utf-8">
<title>Links</title>
</head>
<body>
<h1>Here are my favorite sites:</h1>
<p><strong>Click a name to visit that site.</strong></p>

<!-- create two text hyperlinks -->


<p><a href = "http://www.facebook.com">Facebook</a></p>
<p><a href = "http://www.twitter.com">Twitter</a></p>

<!– create an image hyperlink -->


<p><a href = "http://www.emu.edu.tr"><img src="emu.jpg"></a></p>
</body>
</html>
38
3.4 Creating LINKS
Hyperlinks – Internal Linking
❖ When you link your pages within your own directory tree
limit is called Internal Link.
❖ While a user browsing your website , the browser is already
in your directory, then you can points links from the current
directory and don't need to specify a full URL path.
❖ Consider a directory hierarchy like this;

39
3.4 Creating LINKS
Hyperlinks – Internal Linking
❖ If you are in main directory of mywebsite.com , and you want to
link to html page tables/border.html from main directory you can
code like this;
<a href="html/tables/border.html">Table Border</a>
❖ If you are in HTML directory of mywebsite.com , and you want to
link to html page tables/border.html from HTML directory you can
code like this
<a href="tables/border.html">Table Border</a>
❖ In this cases you can avoid a full URL path like :
<a
href="http://www.mywebsite.com/html/tables/border.html">
Table Border </a>

❖ If all your html files are in the same directory , you can give just
file name and extension in HREF attribute.
40
<a href="border.html">Table Border</a>
3.4 Creating LINKS
The Target Attribute
❖ By default, HTML links will open the URL in the same window
(active window). However, with TARGET attribute of HTML Link
Tag, you can have the new document open in a new window, or if
you are using frames, it can open in targeted frame. The different
values that can be assigned to target attribute are listed below;

Target Value Description


_blank Opens the linked document in a new window or tab
_self Opens the linked document in the same
window/tab/frame as it was clicked (this is default)
_parent Opens the linked document in the immediate parent of
the document that the link is in/ in the parent frame
_top Opens the linked document in the full body of the
window
framename Opens the linked document in a named frame
41
3.4 Creating LINKS
The Target Attribute
Examples
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Links</title></head>
<body>
<h3>Click a name to visit that site.</h3>

<!–- opens the link in new window -->


<p><a href="http://www.emu.edu.tr" target="_blank">EMU</a></p>

<!-- opens the link in self window -->


<p><a href="http://www.facebook.com" target="_self">Facebook</a></p>

<!-- opens the link in full window -->


<p><a href="http://www.twitter.com" target="_top">Twitter</a></p>

</body>
</html>
42
3.4 Creating LINKS
Hyperlinking to an E-Mail Address
❖ Email links are created using the HTML anchor tag <a>..
</a>, which is the same tag used for creating links to
another web page.
❖ Here the only difference is that, rather than specifying a
web URL, you have to set the HREF property equal to the
mailto: email address.
❖ When the user clicks this type of anchored link, most
browsers launch the user’s default e-mail program (for
example, Microsoft Outlook) to enable the user to write an
email message to the linked address.
❖ The form of an e-mail anchor is:
<a href = "mailto:emailAddress">…</a>.
❖ If you want send email to more than one address, simply
separate the email addresses with a comma.
43
3.4 Creating LINKS
Hyperlinking to an E-Mail Address
❖ You can also have the SUBJECT of the email automatically
populated for your visitors.
Examples
<!DOCTYPE html>
<html>
<body>

<p>Send E-mail to:


<a href="mailto:[email protected]">Raygan Kansoy</a></p>

<p><a href="mailto:[email protected], [email protected]">


Raygan Kansoy</a></p>

<br><br>
<a href="mailto:[email protected]?Subject=Registration">Contact Us</a>

</body>
</html>
44
3.4 Creating LINKS
Bookmarks
❖ HTML anchor or Html Bookmark is helpful, if you have a
long page that you want to allow the users to quickly
navigate to different sections in the same web page or you
can navigate to targeted location of the other web page.
❖ The Anchor tag <a>..</a> is using for creating bookmark
links.
❖ You can link to a bookmark on a different page, by
mentioning the url of the page to the bookmark name in
the href attribute:
<a href="http://mywebsite.com/index.html#toc">
Table of Contents </a>
❖ In the following example, when you click on the link "GoTO
Bottom" the page will scroll down and position the
bookmark "Bottom" at the top of the browser.
45
3.4 Creating LINKS
Bookmarks
Example Output

<!DOCTYPE html>
<html>
<body>

<a href="#bottom">GoTo Bottom</a>


<br><br><br><br><br><br><br><br><
br><br><br><br><br><br><br><br><b
r><br><br><br><br><br><br><br>

<!--Bookmark comes here-->


<a name="bottom">Bottom</a>
<p>This is the bottom of the page </p>

</body>
</html>

46
3.4 Creating LINKS
Bookmarks
Examples
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Bookmarks</title></head>
<body>

<div id="top"> Top of the Page!</div>

<p>Hypertext Markup Language (HTML) is the standard markup language for


creating web pages and web applications. With Cascading Style Sheets (CSS)
and JavaScript it forms a triad of cornerstone technologies for the World Wide
Web.Web browsers receive HTML documents from a web server or from local
storage and render them into multimedia web pages. HTML describes the
structure of a web page semantically and originally included cues for the
appearance of the document.</p>

<p><a href="#top">Go to Top</a></p>

</body>
</html>
47
3.4 Creating LINKS
Download Links
❖ Downloading files from your website is a great way to offer
information that people can view offline, rather than view in
the browser window.
❖ With the help of an HTML download link, visitors can download
any files from your website to their local computers.
❖ Download links are created using the HTML anchor tag
<a> ..</a>, which is the same tag used for creating links to
another web page.
❖ The only difference is that you have to set the HREF property
equal to your download file, rather than specifying a web URL.
❖ Using this download link, you can provide any type of
downloadable files like pdf, mp3, text, zip etc. from your
website.
❖ Do not forget that, before you creating the download link , you
have to upload the file in the specified location of the download
48 link.
3.4 Creating LINKS
Download Links
Examples
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Download Links</title></head>
<body>
<h3>Click the files to Download ---></h3>
<!–- download a ppt file -->
<p><a href="http://staff.emu.edu.tr/raygankansoy/itec229/ch1.ppt">
Chapter1</a></p>
<!–- download a pdf file -->
<p><a href="http://staff.emu.edu.tr/raygankansoy/itec229/ch2.pdf">
Chapter2</a></p>
<!– download a word file -->
<p><a href="http://www. yourwebsite.com/files/c3.docx">Chapter3</a></p>
<!– download a zip file -->
<p><a href="http://www. yourwebsite.com/x.zip">Zip File</a></p>
<!-- download a mp3 file -->
<p><a href="http://www.yourwebsite.com/files/song.mp3">Song</a></p>
</body>
</html>
49
Adding a Content

END of CHAPTER 3

LOGO

You might also like