03 HTML Basics
03 HTML Basics
Adding a Content
CHAPTER 3
LOGO
Contents
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>
Example Output
<!DOCTYPE html>
<html>
<body>
</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>
</body>
</html>
7
3.1 Working With Text
Text Formatting Elements
Example Output
<!DOCTYPE html>
<html>
<body>
<p>This is a <small>Small
Text</small></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>
</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
Output
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>
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 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>
</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>
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.
</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>
<P align="center"><strong>Size:</strong>8
<strong>Width:</strong>50%
<strong><em> 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
❖ 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.
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>
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;
</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>
<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>
</body>
</html>
46
3.4 Creating LINKS
Bookmarks
Examples
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Bookmarks</title></head>
<body>
</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