CSE1041 - Web - 1 - Revampedweek2

CSE1041 Web 1
Week 2
HTML (formatting & tables)
1
Introduction to HTML
• Introduction to HTML
• Hyper Text Markup Language
– Used to format documents to be displayed in
browsers
– Used to create forms to accept user data to be
sent to Web/Application Server
• As and when we discuss new ideas, you are
expected to include them within your project
2
Formatting Tags
• Hyper Text Markup Language
– Instructions for your browser to display text
– Consist of open and close tags (not mandatory in
all cases but good practice)
– Not case-sensitive but avoid mixing cases
– Indentation makes reading the codes easier
3
Example 1
<html>
<head>
<title>My first html</title>
</head>
<body>
This is my first html
</body>
</html>
4
Example 1 (Explained)
• HTML documents start with <HTML>
– instructs your browser to display your web page.
• Each open tag has corresponding close tag
• Tags are properly nested (although not a strict
requirement in HTML, adhere to this
convention to avoid surprises when writing
Javascript codes)
• Good practice to write the corresponding
closing tag as soon as you write any tag.
5
Example 2 - Adding <h1> heading tags
<html>
<head>
<title>Web Technologies</title>
</head>
<body>
<h1>Web Technologies CSE 1041</h1>
</body>
</html>
6
Example 3: Adding <h2> heading tags
<html>
<head>
<title>Illustrating h2 tag</title>
</head>
<body>
<h1>Web Technologies CSE 2003Y (3)</h1>
<h2>Outline</h2>
<h2>Grading Policy</h2>
<h2>Resource Persons</h2>
<h2>Contact Hours</h2>
<h2>Feedback</h2>
</body>
</html>
7
Example 4- Adding <ul> and <li> tags
<html>
<head>
<title>Adding bullets unordered lists</title>
</head>
<body>
<h2>Outline</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>Server Side languages
<ul>
<li>ASP</li>
<li>JSP</li>
<li>PHP</li>
</ul>
</li>
</ul>
<h2>Feedback</h2>
</body> 8
</html>
Example 5- Adding <ol> and <li> tags
<html>
<head>
<title>Adding bullets unordered lists</title>
</head>
<body>
<h2>Outline</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<ol>
<li>ASP</li>
<li>JSP</li>
<li>PHP</li>
</ol>
</li>
</ul>
<h2>Feedback</h2>
</body> 9
</html>
Example 6- Adding <p> tag and align
<html>
<head>attribute
<title>p tag and align attribute</title>
</head>
<body>
<p align="RIGHT">6th September 2007</p>
<h1 align="CENTER">Web Technologies CSE 2003Y (3)</h1>
<h2>Outline</h2>
<p align="LEFT">Welcome to the CSE 1041 module. You are going to have a lot of fun
learning
<ul>
<li>HTML</li>
<li>Javascript</li>
<ol>
<li>PHP</li>
<li>ASP.NET</li>
</ol>
</li>
</ul>
</p>
<p>Hope you enjoy the module</p>
<h2>Feedback</h2>
</body>
</html>
10
Example 7: Adding <sup>,<b>,<i> tags
<html>
<head>
<title>sup, b and i tags</title>
</head>
<body>
<p align="RIGHT">18<sup>th</sup> August 2008</p>
<h1 align="CENTER">Web Technologies CSE 2003Y (3)</h1>
<h2>Outline</h2>
<p align="LEFT">Welcome to the <b>CSE 1041</b> module. You will have fun learning
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<ol>
<li>ASP</li>
<li>JSP</li>
<li>PHP</li>
</ol></li>
</ul>
</p>
<p>Hope you <i>enjoy</i> the module</p>
<h2>Feedback</h2>
</body>
</html> 11
Investigate other formatting tags
<sub> (subscript)
<u>(underline)
<strike>(strikethrough)
<code>(use fixed width font)
12
<html>
Example 8: Adding <img> tag
<head>
<title>images</title>
</head>
<body>
<p align="RIGHT">18<sup>th</sup> January 2013</p>
<h1 align="CENTER">Web Technologies CSE 1041)</h1>
<h2>Outline</h2>
<p align="LEFT">Welcome to the <b>CSE 1041</b> module. You are going to have a lot of fun learning
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Server Side languages</li>
<ol>
<li>ASP</li>
<li>JSP</li>
<li>PHP</li>
</ol>
</li>
</ul>
</p>
<p>Hope you <i>enjoy</i> the module</p>
<p>Anwar Chutoo
<img src="images/bicycle.gif" alt="bike picture" >
</p>
<p>Zahrah Mungloo Dilmohamed</p>
<h2>Feedback</h2>
</body>
</html>
13
<img> tag continued
• The alt attribute is used to display some text in case
the image cannot be loaded and displayed by the
browser.
• The height and width attributes can be used to resize
the appearance of the image.
• Good practice requires we use relative paths v/s
absolute paths to specify the source of the image (any
file for that matter)
• Allows easy maintenance and portability amongst
others
• One common mistake students make is to write scr
instead of src for the source of theimage.
14
Adding <table> tag
<table border=1 width=90%>
<tr >
<th></th>
<th>is2a</th>
<th>is2b</th>
<th>cse2a</th>
<th>cse2b</th>
<th>cse2c</th>
</tr>
<tr>
<td>Lecture</td>
<td align="center">Anwar Chutoo</td>
<td>Anwar Chutoo</td>
</tr>
<tr>
<td>Lab</td>
<td>Zarah Mungloo</td>
</tr>
</table>
15
<table> tag continued
• The <tr> tag is used to create a row.
• The <td> tag is used to create a cell within the table
• The <th> tag is used to define a table header
• We can use the align attribute to align the text within a
table cell
• The width tag is used to define the size of our table (I
am specifying the width as a percentage of the screen
width)
• Investigate the cellpading and cellspacing attributes
16
Example 10: Adding <colspan> tag
<tr >
<th></th>
<th>is2a</th>
<th>is2b</th>
<th>cse2a</th>
<th>cse2b</th>
<th>cse2c</th>
</tr>
<tr>
<td>Lecture</td>
<td align="center" colspan=5>Anwar Chutoo</td>
</tr>
<tr>
<td>Lab</td>
</tr>
</table>
17
<colspan> continued
• Notice that we do not include any <td> for the
row to be spanned
18
Example 11: Adding <rowspan> tag
<tr >
<th></th>
<th>is2a</th>
<th>is2b</th>
<th>cse2a</th>
<th>cse2b</th>
<th>cse2c</th>
</tr>
<tr>
<td>Lecture</td>
<td align="center" colspan=5>Anwar Chutoo</td>
</tr>
<tr>
<td>Lab</td>
<td colspan=2>Anwar Chutoo</td>
<td rowspan=2>Zarah Mungloo</td>
</tr>
<tr>
<td>tutorial</td>
<td >Anwar Chutoo</td>
</tr> 19
</table>
Class Exercise
• Write the codes for the tables below
20
Hyperlinks
• The <a> tag
• Used to provide a link to another document or
section in a document
• Used to provide link to a mail composer
• Used to define a section within a document
• Used for local and parallel navigation
21
Example 12- Adding <a> tag as
Hyperlinks
<p>
<a href="myFirsthtml.html">Anwar Chutoo</a>
<img src="images/bicycle.gif" alt="my bike" >
</p>
22
Example Explained
• Notice Use of relative paths to access pages
(Good practice)
• “myFirsthtml.html” is in the same folder as the
current page.
• If the page were in a folder one level up the
hierarchy, we would write the link as
“../myFirsthtml.html”. The ../ tells your browser
to climb one level up to access the page.
• Exercise:
– How would you specify a link to a page, found in a
folder “test” 2 levels up from the current folder?
23
Adding <a> tag as link to mail
• Clicking on link opens email client with email
specified in the ‘to’ field
<p>
<a href="mailto:a.chutoo@uom.ac.mu">Anwar </a>
</p>
24
Example 14- Adding an image as link
<p>
<a href="mailto:a.chutoo@uom.ac.mu">Anwar
</a>
<a href="myFirsthtml.html">
</a>
</p>
25
Example 15: Using <a> to divide
document into sections
<a name="Outline">
<h2>Outline</h2>
..
<a name=”Grading”>
...
<a name=”Feedback”>
26
Example 15- Specifying a link to move
to specific section of a web page
<html>
<head>
<title>Link to a section of a
document</title>
</head>
<body>
This is an html with a link to a section
<a
href="Web13.html#feedback">feedback</a>
</body>
</html>
27
Example 15
• This technique can be used to provide local
navigation within a document. Investigate
how you can achieve it
28

CSE1041 - Web - 1 - Revampedweek2

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

CSE1041 - Web - 1 - Revampedweek2

Încărcat de

Drepturi de autor:

Formate disponibile

CSE1041 Web 1

S-ar putea să vă placă și