Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
50 views

L04 HTML 2

CSE417 is a course on web engineering at Daffodil International University. The document outlines some of the key HTML elements and tags that will be covered in the course, including structure tags, paragraphs, headings, text formatting, lists, hyperlinks, images and tables. It provides examples of how to use these elements and tags to structure and format text, images and other content in web pages.

Uploaded by

Eren Jeager
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
50 views

L04 HTML 2

CSE417 is a course on web engineering at Daffodil International University. The document outlines some of the key HTML elements and tags that will be covered in the course, including structure tags, paragraphs, headings, text formatting, lists, hyperlinks, images and tables. It provides examples of how to use these elements and tags to structure and format text, images and other content in web pages.

Uploaded by

Eren Jeager
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

CSE417: WEB ENGINEERING

Daffodil International University


You Will Be Able To

✔ Know basics of static web page

✔ Use HTML elements

“To acquire knowledge, one must study; but to acquire wisdom, one must
observe.”
― Marilyn vos Savant
Contents

❖ HTML Elements
➢ Structure
➢ Paragraphs
➢ Headings
➢ Text
➢ Lists
➢ Hyperlinks
➢ Images
➢ Tables
Tags vs. Elements
• HTML specifies a set of tags that identify structure and content type
▪ tags are enclosed in < >
<img src="image.gif" /> specifies an image

▪ most tags come in pairs, marking a beginning and ending


<title> and </title> enclose the title of a page

• an HTML element is an object enclosed by a pair of tags


<title>My Home Page</title> is a TITLE element

<b>This text appears bold.</b> is a BOLD element

<p>Part of this text is <b>bold</b>.</p>


is a PARAGRAPH element that contains a BOLD element

HTML document is a collection of elements (text/media with context)


Structural Elements
• an HTML document has two main structural elements
▪ HEAD contains setup information for the browser & the Web page
e.g., the title for the browser window, style definitions, JavaScript code, …
▪ BODY contains the actual content to be displayed in the Web page

<html> ➔ HTML documents begin and end with <html>


<!–- Version information and </html> tags
--
-- File: page01.html --
➔ Comments appear between <!-- and -->
-- Author: DIU-- ➔ HEAD section enclosed between <head> and
-- Creation: 15.08.09 -- </head>
-- Description: ➔ BODY section enclosed between <body> and
introductory page --
</body>
-- Copyright: DIU--
-->
<head> * Find more info on HTML docs!
<title>My first HTML
document</title>
</head>
<body>
Hello world!
</body>
</html>
Text Layout(Paragraph)
<html> for the most part, layout of the text
<head>
<title>Text Layout</title> must be left to the browser
</head> ▪ every sequence of whitespace is
<body> interpreted as a single space
<p> ▪ browser automatically wraps the text to
This is a paragraph of text<br/>
fit the window size
made up of two lines.
</p> can override some text layout
<p> ▪ can cause a line break using the <br/> tag
This is another paragraph with a (no closing tag)
&nbsp; GAP &nbsp; between
some of the words. ▪ can specify a new paragraph (starts on a
</p> new line, preceded by a blank line) using
<p>…</p>
<p>
&nbsp;&nbsp; This paragraph is<br/> ▪ can force a space character using the
indented on the first line<br/> symbol for a non-breaking space: &nbsp;
but not on subsequent lines.
</p>
</body>

</html>
Text Layout…
Headings: Separating Blocks of Text
<html>
<head> can specify headings for
<title>Blocks of Text</title>
</head> paragraphs or blocks of text
<body> ▪ <h1>…</h1> tags produce a large,
<h1>Major heading 1</h1>
<p> bold heading
Here is some text.
</p>
▪ <h2>…</h2> tags produce a slightly
smaller heading
<h2>Subheading</h2>
<p> ...
Here is some subtext. ▪ <h6>…</h6> tags produce a tiny
</p>
heading
<hr/>

<h1>Major heading 2</h1>


<p>
can insert a horizontal rule to
Here is some more text. divide sections
</p>
</body>
▪ <hr/> draws line across window
</html>
Headings: Separating Blocks of Text
The Basic Web page – A Worked Example
<html>
<head>
<title> Bill Smiggins Inc. </title>
</head>
<body>
<h1>Bill Smiggins Inc.</h1>
<h2>About our Company...</h2>
<p>This Web site provides clients, customers,
interested parties and our staff with all of
the information that they could want on
our products, services, success and failures.
</p>
<hr/>
<h3> Products </h3>
<p> We are probably the largest
supplier of custom widgets, thingummybobs, and bits
and pieces in North America. </p>
<hr/>
</body>
</html>
Text Appearance
<html>
<head>
  <title>Text Variations and Escape
can specify styles for fonts
Sequences</title> ▪ <b>… </b> specify bold
 </head>
▪ <i>… </i> specify italics
 <body>
  <h1>Text Variations</h1> ▪ <tt>… </tt> specify typewriter-like
  <p>We can use <b>simple</b> tags to  (fixed-width) font
<i>change</i> the appearance of  ▪ <big>… </big> increase the size of the
<strong>text</strong> within  font
<tt>Web pages</tt>.  ▪ <small>… </small> decrease the size of the
Even super<sup>script</sup> 
font
and sub<sub>scripts</sub> are 
▪ <em>…</em> put emphasis
<em>supported</em>.</p>
▪ <strong>…</strong> put even more
<h1>Text Escape Sequences</h1> emphasis
<p> ▪ <sub>… </sub> specify a subscript
&amp; &lt; &gt; &quot; &copy; ▪ <sup>… </sup> a superscript
</p> ▪ <pre>…</pre> include ready-formatted
<h1>Preformatted text</h1>
text
<pre>
▪ &amp; &al; &gt; &quot; &copy;
BRAC University
Department of Computer Science escape characters used in HTML
CSE391: Programming For Internet :) control
</pre>
 </body> * Find more info on text tags!
</html>
Lists there are 3 different types
<html>
<head> <title>(Sort of) Simple Lists</title>
of list elements
<style type=“text/css”> ▪ <ol>…</ol> specifies an
.my_li:before {content: counter(list) “: “; ordered list (using numbers
counter-increment: list; }
</style> </head> or letters to label each list
<body> item)
<ul style="list-style-type: square;"> <li> identifies each list item
<li> ... first list item... </li> can set type of ordering, start
<li> ... second list item... ... </li> index
</ul> ▪ <ul>…</ul> specifies
<dl> <dt> Dweeb </dt>
<dd> young excitable person who may unordered list (using a bullet
mature into a <em>Nerd</em> </dd> for each)
<dt> Hacker </dt>
<li> identifies each list item
<dd> a clever programmer </dd>
<dt> Nerd </dt> <dd> technically bright but ▪ <dl>…</dl> specifies a
socially inept person </dd> definition list <dt> identifies
</dl>
each term
<ol style="list-style-type: none;
counter-reset: list 29;" > <dd> identifies its definition
<li class=“my_li”>Makes first item number 30.</li> * We will learn more about the
<li class=“my_li”>Next item continues to number “style” attributes soon enough.
31.</li>
</ol>

</body>
</html>
Hyperlinks
perhaps the most important HTML
<html>
element is the hyperlink, or
<head>
<title>Hyperlinks</title>
ANCHOR
</head>
▪ <a href="URL">…</a>
<body> where URL is the Web address of the
<p> page to be displayed when the user
<a href="http://www.google.com">
Google University</a> clicks on the link
<br/> ▪ if the page is accessed over the Web,
<a href="page22.html" must start with http://
target="_blank">
Open page22 in a new window</a>
▪ if not there, the browser will assume it
</p> is the name of a local file
</body>
▪ <a href="URL" target="_blank">…</a>
</html>
▪ causes the page to be loaded in a new
Window

* Find more info on attribute TARGET


Hyperlinks (cont.)
<html>
<head> for long documents, you can
<title>Internal Links in a Page</title>
</head> even have links to other
<body> locations in that document
<p> ▪ <a name="ident">…</a>
[ <a href="#HTML">HTML</a> |
<a href="#HTTP">HTTP</a> |
<a href="#IP">IP</a> | where ident is a variable for
<a href="#TCP">TCP</a> ]
</p>
identifying this location
<p>
Computer acronyms:
▪ <a href="#ident">…</a>
<dl>
<a name="HTML"></a><dt>HTML</dt>
<dd>HyperText Markup Language will then jump to that location within
<a name="HTTP"></a><dt>HTTP</dt>
<dd>HyperText Transfer Protocol…</dd> the file
<a name="IP"></a><dt>IP</dt>
<dd>Internet Protocol…</dd>
▪ <a href="URL#ident">…</a>
<a name="TCP"></a><dt>TCP</dt>
<dd>Transfer Control Protocol…</dd>
</dl> can jump into the middle of another
</p>
file just as easily
</body>
</html>
Images
can include images using IMG
▪ by default, browsers can display GIF and JPEG files
▪ other image formats may require plug-in applications for display

<img src="URL"|"name" height="n" width="n" alt="text" title= “text” />

again, if file is to be accessed over the Web, must start with http:// (if not, will assume local file)

* Find more info on <img/>

<html>
<head>
<title>Images</title>
</head>
<body>
<img src="w3javascript.png" alt=“JS” title=“JavaScript” />
<p>W3Schools JavaScript Tutorials</p>
</body>
</html>
Tables
• tables are common tools for arranging complex layout on a Web page
▪ a table divides contents into rows and columns
▪ by default, column entries are left-justified, so provide for alignment

<html>
<head>
<title>Tables</title> ● <table>…</table> specify a table
</head> element
<body>
<h2>A Simple Table</h2>
  <table> ● <tr>…</tr> specify a row in the
   <tr> table
     <td> Left Column </td>
     <td> Right Column </td>
● <td>…</td> specify table data (i.e.,
   </tr>
   <tr> each column entry in the table)
     <td> Some data </td>
     <td> Some data </td>
   </tr>
 </table>
</body>
</html>
Layout in a Table
<html> can have a border on tables using the
<head> “border” attribute
<title>Table Layout</title> <table style= “border: 1px solid;”>
</head>
increasing the number makes the border thicker
<body>
<table style="border: 1px solid;">
<tr style="text-align: center;"> can control the horizontal & vertical
<td style="border: 1px solid;">
layout within cells
Left<br/>Column</td> <td style= “text-align:center“>
<td style="border: 1px solid; <td style= “vertical-align: bottom">
vertical-align: top;">
Right Column</td>
</tr>
<tr> can apply layout to an entire row
<td style="border: 1px solid;"> <tr style=“text-align: center“>
Some data</td> <tr style=“vertical-align: top“>
<td style="border: 1px solid;">
Some data</td>
</tr>
</table> We will explore this more with
</body>
</html> Cascading Style Sheets.
Table Width
<html>
<head> by default, the table is sized to
<title>Table Width</title> fit the data
</head>

<body>
<table style="width: 100%;"> can override & specify the
<tr>
<td>left-most </td>
width of a table relative to the
<td style="text-align: page
right;">
right-most</td>
</tr> <table style=“width: 60%“>
</table>
</body>
</html>
Other Table Attributes
<html>
<head>
can control the space between cells &
<title>Table Formatting</title> margins within cells
<style type="text/css" media="screen">
This is the “padding” attribute in the table
table { border: 1px solid; padding: 1px;} and
th, td { border: 1px solid; padding: 10px; th,td style sheet declarations (more on this
text-align: center; }
</style> with Cascading Style Sheets).
</head> can add headings
<body> <th> is similar to <td> but displays
<table> heading centered in bold
<tr>
<th>HEAD1</th> <th>HEAD2</th> can have data that spans more than one
<th>HEAD3</th> column
</tr>
<tr>
<td colspan=“2”>
<td>one</td> <td>two</td> <td>three</td> similarly, can span more than one row
</tr>
<tr>
<td rowspan=“2”>
<td rowspan="2"> four </td> (This example uses CSS style sheet
<td colspan="2"> five </td>
</tr> commands in the page <header>.)
<tr>
<td> six </td> <td> seven </td>
</tr>
</table>
</body>
</html>
Frames
• frames provide the ability to split the screen into independent parts

Frames are going out of fashion, partly because they interact poorly with web
search engines (i.e. search engines cannot generally access the data stored in
the inset frame objects).

Frames can also “break” the regular behaviour of browsers, most notably the
“Back” button on the browser can behave in unexpected ways.

Because of these drawbacks to frames, I will not be discussing them in this


course.

If you wish to design websites using frames, I would encourage you to use the
XHTML XFrames specifications (see the W3C website for more details), but
this specification isn’t fully supported by all browsers at this time.
Exercise
• Why do we need protocols?
• Write two applications of HTTP.
• READINGS
▪ M Schafer: Ch. 4, 5, 6, 7, 8
▪ https://www.w3schools.com/html
Acknowledgement

• This module is designed and created with the help from


following sources-
▪ https://cgi.csc.liv.ac.uk/~ullrich/COMP519/

▪ http://www.csc.liv.ac.uk/~martin/teaching/comp519/

You might also like