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

HTML Basics

HTML is a markup language used to define the structure and layout of web pages. HTML documents contain elements that are used to enclose, wrap, and associate information with various semantic tags like headings, paragraphs, lists, links, and images. A basic HTML document includes a head section for metadata and a body section that contains the visible page content.

Uploaded by

ARYAN RATHORE
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
37 views

HTML Basics

HTML is a markup language used to define the structure and layout of web pages. HTML documents contain elements that are used to enclose, wrap, and associate information with various semantic tags like headings, paragraphs, lists, links, and images. A basic HTML document includes a head section for metadata and a body section that contains the visible page content.

Uploaded by

ARYAN RATHORE
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 45

HTML BASICS

1
MARK-UP LANGUAGES
 Traditionally used to provide typesetting information to
printers where text should be indented, margin sizes,
bold text, special font sizes and styles, etc.
 Word processors like MS Word, and typesetting systems
like LaTex are also forms of mark-up languages.
 Rich Text Format (rtf) files are written in a mark-up text
format.

2
HYPERTEXT MARKUP
LANGUAGE ( HTML )
 describes the structure of the document

 provides
text and other formatting instructions to tell
the browser how to render the material.

 has
evolved to version 4.01.
www.w3.org

3
WEB BROWSER
 Software when connected to the Internet is able to access
documents at remote locations and display them locally
in accordance with its interpretation of markup
instructions in the document.

 Examples: Internet Explorer, Chrome, FireFox, Opera,


etc.

4
HTML DOCUMENTS
 Plain text files, with extension htm or html.
 The extension tells the browser interpret the file according
to HTML standards.
 Use any plain text editor to create html files manually.

 Browsers may display other types of files as well, according


to the file’s extension.
 TXT - .txt - plain text file, no formatting.
 PDF - . portable document format (Adobe corporation)
 JPG - .jpg - JPEG image file.

5
HTML EXTENSIONS
 For special applications there are proprietary extensions
for the html language although they are NOT official
parts of html.

 Active Server Pages (ASP) files are server-side script engine


by Microsoft.

 Personal Home Page: Hypertext Preprocessor (PHP) which,


like asp, generally require the server to have a special
handling package installed, for the extension.

6
CASE RESTRICTIONS
 html is case-insensitive, meaning that either upper or
lower case may be used.

Example: <hr> = <HR> = <hR>.

 Use lower case only in this course.

7
BASIC HTML DOCUMENT STRUCTURE
<html> { Markup Language Type Declaration }

<head>
<title> { Descriptive Text Here }</title>
</head>

<body>
{ Main content here }
</body>

8
</html>
DOCTYPE
 A pre-processor directive at the top of the document tells the
browser what kind of standards apply to the document.

See the first line of the "testpage.html" example.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


 

9
TEMPLATE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>***replace this text with course & section number and your full name </title>

</head>

<body>
<!--Begin your content specification by adding your elements here. -->

</body>
10
</html>
ELEMENTS
 html documents consist of a number of elements where text is
placed in containers with a start tag and an end tag (tandem
tags)

<start tag>some text goes here.</end tag>


 
 Some containers use only one tag – aka empty  or stand-
alone tags

<hr> : draws a line across the document


<br> : a line feed, or break 11
BASIC CONSTRUCTS
 All tags must be nested correctly:
 
<p> … </p> contains a paragraph and 
<em> … </em> contains emphasized text
 
Invalid: 
<p>This <em> overlap is not nested. </p> So it is
invalid. </em>

Valid: 
<p><em>This is correct nesting.</em> It is valid!</p>
12
THE HEAD (HEADER) SECTION

 <head> (begin the head section)

 <title> (a descriptive title of document)

 </title>

 <! --- >Optional items such as script here</>

 </head>  (end of the head section)


13
THE BODY SECTION
<body>

{ elements of the document to be displayed in the document


area go here }

</body>

14
TEXT ELEMENT TAGS

<p> … </p>  (Paragraph)


<b> … </b>  (Bold)
<i> … </i>  (Italics
<u> … </u>  (Underline)
<em> … </em> (Emphasis - depends on browser)
<br>  (Line feed or break)
<hr> (Horizontal Rule/line)

15
HEADINGS – SIX (6) LEVELS

<h1> … </h1> (Heading level 1: most prominent)


<h2> … </h2>
<h3> … </h3>
…
<h6> … </h6> (Heading level 6: least prominent)

<blockquote> … </blockquote> (Indents one tab)


 
16
LISTS
<ol> (Begin an Ordered List)

<li> … </li> (A list element)


<li> … </li> (Another list element)

</ol> (End of Ordered List)


 

<ul> … </ul> (As above, but Unordered List)

17
HTML DOCUMENT EXAMPLE
<html>
<! This is a comment line: Browser will ignore it.>
<head>
<title> HTML document example</title>
</head>
 
<body>
<h3> This be a heading level 3</h3>
<p>This is a sentence in this document.</p>
<p>This is another sentence.</p>
<blockquote>
<ol>
<li> List item number 1</li>
<li> List item number 2</li>
<li> List item number 3</li>
</ol>
</blockquote>
</body> 18
</html>
THE ANCHOR ELEMENT
 The anchor element, the single letter a, is used to
connect or link different documents or parts of one
document.

 Any text associated with the anchor element,


called anchor text is displayed on the screen.

 When an anchor text is clicked, a 'jump' is made to the


destination or target location.
 
19
HYPERTEXT LINKS
 Used to create a link that jumps from one point in a
document to another document.

 Destination may be external (another web site)


or local (a document in the local machine).

20
GENERAL FORM:

<a href = “URL”> anchor text </a>

21
EXAMPLE A  (EXTERNAL):
<a href = “http://www.yorku.ca”>York University</a>

 Searches for the web site “yorku.ca” on the World Wide


Web.

 A default page will be displayed when the site is located.

22
EXAMPLE B (LOCAL):
<a href = “rules.html”>Game Rules</a>
 
 Causes the html file “rules.html” to replace the current
page in the browser.

 The browser assumes the file is in the same directory as


the currently displayed file (default) – otherwise an error
message will be displayed.

23
EXAMPLE C (NOT TRANSPORTABLE):
<a href = “file://c:/myfiles/rules.htm”>Game Rules</a>

 Looks for the page in the myfiles subdirectory or folder on


C: drive of your machine; not on the Web.
 Unless your computer is a web server, your site can only
be accessed on your machine.

24
INTERNAL (NAMED) LINKS
 Used to create a link that jumps from one point in a
document to another in the same document.

 The destination or the target location in the document is


marked with a name tag.

 A “#” pre-pended to the destination name is used


with href specification at the origin point.

25
EXAMPLE D: INTERNAL (NAMED)
LINKS
<a name = “target”> </a>

 Creates a named label “target” at the point in the document


where it is located.

<a href = “#target”>Go To Target Section</a>

 Displays “Go To Target Description” and causes a jump to


the point of the label when clicked.

Note:  "target" is case-sensitive; must be identical in both tags.


26
IMAGES - EMBEDDED/INLINE
 The <img … > tag (element) is used to manipulate
image and graphics files.

Attributes:
 src = “name….”: Identifies the file to be loaded into a
document.
 align = “top”, “middle”, “bottom”, “left”, or “right”:
Positions the image in the document

27
E.G. 1
<img src = “selfie01.jpg”>

 Loads a jpeg* file named “selfie01” into the document at


the location of the element.

  JPEG - Joint Photographic Experts Group compression


format – file extension, .jpg
 

28
E.G. 2
<img src = “selfie01.gif” align = “right”>

 Loads a gif* file named “selfie01” into the document at


the location of the element, and moves it to the right
hand side of the page.

 GIF - Graphics Interchange Format compression format


- file extension, .gif

29
E.G. 3
<img src = “selfie01.bmp” align = “middle” height =
“100” width = “200”>

 Loads a *.bmp file into the document, centers it vertically,


relative to the line, and gives it a height of 100 pixels and
a width of 200 pixels.

 This may distort the original proportions of the


image. BMP- BitMap: simpler non-compressed graphics
image format. - file extension, .bmp
 
30
E.G. 4
<img src = “selfie01.jpg” alt = “Sorry, no picture
available!”>

 Loads the image “selfie01.jpg” if available.

 If for some reason the image can not be loaded, the


browser should display the text “Sorry, no picture
available!” in its place.

 This facility was originally intended to accommodate


text-only browsers.
31
ANIMATED GIF FILE

 A *.gif image file which is composed of a series of


frames or images, simulates motion by displaying the
images in the file consecutively.

 It is an electronic equivalent of an older style celluloid


motion picture.

32
TABLES

A table is a matrix formed by the intersection of


horizontal rows and vertical columns.
 

Column 1 Column 2 Column 3

Row 1

Row 2

Row 3

33
TABLES

• The intersection of a column and row is called


a cell.

• Cells in the same row or column are usually


 
 
logically related in some way.

Column 1 Column 2 Column 3

Row 1 cell cell cell


Row 2 cell cell cell
Row 3 cell cell cell

34
TABLES
 A table is defined by the tandem tag container <table>
… </table> .

 HTML expects everything between the start and end


elements to be part of the table.

 Different browsers may render table element attributes


differently, but, in general, things like cell spacing, type
of border, size of cells, number of cells in a row, and
background and text colors may be defined.
35
< tr > … < /tr> 

 Within each row container, each cell is defined by either table


header < th > … < /th > , or table data < td > … < /td > 
 
<th> … < /th > is for Table Header

<td> … < /td > is for ordinary Table Data

The Table Header container < th > … < /th >


has exactly the same output as the combination:

<td><center><b> … </b></center></td>
 
36
 
Table Format [ 3 columns x 2 Rows ]

<table>
<tr> 
<th> Row Header </th> <td> Data </td> <td> Data </td> </tr>
<tr> <td> Data </td> <td> Data </td> <td> Data </td> </tr>
</table>
 

37
< th > and <td> Attributes:

colspan = “x” : Forces the cell to cover “x” number of columns. Default = 1.
E.G. < td colspan = “3” > . . . </td>

rowspan = “y” : Forces the cell to cover “y” number of rows. Default = 1.
 

font whatever = ( as desired ) : font attribute such as color, size, family, etc.

valign = “top”, “middle”, or “bottom” : Sets vertical alignment in the cell.


E.G.  < td valign = “top” > . . . </td>

align = “left”, “center”, or “right” : Sets horizontal alignment in the cell.


 

38
Other Table Options:
<thead> … </thead> 
• Defines a header section. Contains <tr> elements.
• If used, it MUST precede a
<tbody> … </tbody> 
• which contains the usual table rows, and this should be followed by a
footer.
<tfoot> … </tfoot> 

• These three are optional unless the first is used.

39
More Table Format [ 3 columns x 2 Rows ]

<table>
<thead>
<tr> <th colspan = “3” align = “center”> Header </th> </tr>
</thead>
<tbody>
<tr> <th> Row Header </th> <td> Data </td> <td> Data </td> </tr>
<tr> <td> Data </td> <td> Data </td> <td> Data </td> <tr>
</tbody>
<tfoot>
<tr> <th colspan = “3” align = “center”> Footer </th> </tr>
</tfoot>
</table>

40
More Example Specifications

Define a table with:


•  Three pixels between the inside edge of a cell and its
contents,
• Two pixels between the outside edges of cells,
• A width of 85% of the browser display,
• No visible border.

<table cellpadding = “3” cellspacing = “2” width = “85%” border = “0”>


 

41
Table cells may contain many different ordinary
HTML containers, making them quite versatile as
aids in layout and design.

Including:
 Images
 Hypertext Links
 Lengthy Text
 Applets & Objects
 Other tables
42
Table-in-a-table example:

<table>
<tr> <td>
<table>
<tr> <td> <img src = “somepicture.jpg”></td></tr>
<tr> <td><a href = “targetURL”>Click ME!</td></tr>
</table>
</td></tr>
</table>

43
Mailto: – Linking to your E-mail client
 

E.G. 1: Invokes a mail client to send an email to an email address

<a href = “mailto:someone@somewhere.com” >


 User's system must be configured for email use.
 

E.G. 2: send an email to the address with a subject

<a href = “mailto: someone@somewhere.com?subject="Hello there!” >

*There is no space between “?” and “subject”

44
The index.html file
 
 The file name “index.html”, or “index.htm” is reserved.
 This is the file in a directory which will be used
automatically by default if a URL ends in the directory
name instead of a file name.
 On most servers, the use of this file as the default helps
prevent unauthorized access to the directory.
 Some servers may have a hierarchy of default file names.

45

You might also like