slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Introduction to HTML PowerPoint Presentation
Download Presentation
Introduction to HTML

Loading in 2 Seconds...

play fullscreen
1 / 44

Introduction to HTML - PowerPoint PPT Presentation


  • 76 Views
  • Uploaded on

Introduction to HTML. Today’s Discussion. What is HTML ? What is Web Page ? Web Server Web Browser What is Internet ? Services Provided by Internet e-mail, ftp, wiki- pedia , blogs, java applets Tools used in creating Web Pages HTML coding …… using an editor. What is HTML ? .

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Introduction to HTML' - sharlene


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
today s discussion
Today’s Discussion
  • What is HTML ?
  • What is Web Page ?
  • Web Server
  • Web Browser
  • What is Internet ?
  • Services Provided by Internet
    • e-mail, ftp, wiki-pedia, blogs, java applets
  • Tools used in creating Web Pages
  • HTML coding …… using an editor
what is html
What is HTML ?
  • Hyper Text Markup Language
    • Web authoring software language
    • Specifically created to make World Wide Web pages
    • The inventor of HTML - Tim Berners-Lee
what is html1
What is HTML ?
  • HTML files
    • Text files
    • Contain mark-up tags
    • Tags direct how page is to be displayed by browser
    • Can be created from a simple text editor
    • File extension “.htm” or “.html”
what is web page
What is Web Page ?
  • Web page : Single disk file with a single file name – composed of:
    • Text, Images, Animations, Hyperlinks, etc.
  • Home page : First page of a website
  • Web site: A collection of one or more web pages
    • Static Website
    • Dynamic Website
what is web server
What is Web Server ?
  • A system on the internet containing one or more web sites.
  • It a software which enabling Internet services.
    • Personal Web Server (PWS)
    • Internet Information Server (IIS)
    • Apache Server
    • Tomcat Server
what is web browser
What is Web Browser ?
  • A client software which is used to render web pages.
    • Internet Explorer
    • Mozilla Firefox
    • Windows Chrome
    • Netscape Navigator
    • Mosaic
web browser and web server client and server
Web Browser and Web Server - Client and Server
  • User uses HTTP client (Web Browser)
  • It has a URL (e.g. http://www.yahoo.com/)
  • Makes a request to the server
  • Server sends back data (the response)
  • User clicks on the client side...

request (URL)

Client

response (HTML, …)

Server

what is internet
What is Internet ?
  • The largest network of networks in the world
what is internet1
What is Internet ?

Continue……

  • A network of networks, joining many government, university and private computers together and providing an infrastructure for the use of E-mail, bulletin boards, file archives, hypertext documents, databases and other computational resources.
what is internet2
What is Internet ?

Continue……

  • The vast collection of computer networks which form and act as a single huge network for transport of data and messages across distances which can be anywhere from the same office to anywhere in the world.
services provided by internet
Services provided by Internet
  • Electronic Mail (e-mail)
  • World Wide Web
  • Telnet
  • File Transfer Protocol (FTP)
  • Internet Telephone
  • Web TV/Radio
  • Internet Relay Chat
  • News Groups
electronic mail e mail
Electronic Mail (e-mail)
  • Distributes e-mail messages and attached files to one or more electronic mailboxes.
  • Eg:- e-mail addresses
    • thomas@mes.edu.in
    • murugan@mesmarampally.org
electronic mail e mail1
Electronic Mail (e-mail)

Continue……

thomas @ mes . edu . in

murugan @ mesmarampally . org

Type of Organization

Country

Name of Person

Organization

electronic mail e mail2
Electronic Mail (e-mail)

Continue……

  • Different e-mail service providers
    • G-Mail
    • Yahoo Mail
    • Hot Mail
w ikipedi a
WIKIPEDIA
  • A wiki is a publishing platform on which many people can contribute new content and revise existing content.
  • The content benefits from the collective knowledge of the contributors, so wikis can be very beneficial for group projects.
  • Some businesses and organizations use wikis to maintain documents.
slide25
Blog
  • An online diary for expressing our thoughts and passion.
  • Also called Weblogs
  • Blogging – The activity of creating blog.
    • Client (Browser) defines the appearance
      • Font preferences, window width, …
    • Pours into Browser (PDAs, Bigger/Smaller)
html characteristics
HTML Characteristics
  • Just a Text File!

+ Portable

+ Human Readable/Writable

  • HTML Defines the Structure (not Appearance) of the Document
  • Client (Browser) defines the appearance
    • Font preferences, window width, …
html characteristics1
HTML Characteristics

Continue……

  • HTML is a set of instructions – called Elements.
  • These elements are grouped into sections:
    • HEAD elements section
      • Only elements that are allowed in the HEAD section of the document.
    • BODY elements section
      • Only elements that are allowed in the BODY section of the document.
naming convention
Naming Convention
  • All elements are enclosed in < > brackets.
  • Most elements require a start tag and end tag.
    • Eg:- <title>My First Web Page</title>
  • The end tag has a forward slash (/).
  • Elements names are not case sensitive.
document structure
Document Structure

<html>

<head><title>My First Web Page</title>

</head>

<body bgcolor="white">

<p>A Paragraph of Text.</p>

</body>

</html>

nested tags

<html>...</html>

<head>...</head>

<title>...</title> other stuff <p>...</p> <br> <table>...</table>

This is some text!

Nested Tags
  • Like a tree, each element is contained inside a parent element
  • Each element may have any number of attributes

<body bgcolor="white” >...</body>

basic tags
Basic Tags

<html>

<head><title>My First Web Page</title>

</head>

<body bgcolor="white">

<p>A Paragraph of Text.</p>

</body>

</html>

html elements
HTML Elements
  • <HTML> Elements
    • It encloses the entire HTML document.
    • Starting tag <HTML>
    • Ending tag </HTML>
  • <HEAD>
    • It encloses the head section of the document.
    • Starting tag <HEAD>
    • Ending tag </HEAD>
html elements1
HTML Elements
  • <TITLE> Elements
    • Found only in head section.
    • Denotes the title of the document.
    • Starting tag <TITLE>
    • Ending tag </TITLE>
  • <BODY>
    • It encloses the body section of the document.
    • Starting tag <BODY>
    • Ending tag </BODY>
html elements2
HTML Elements
  • <H1> Elements
    • Denotes the first level headline of an HTML document.
    • Starting tag <H1>
    • Ending tag </H1>
  • <B>
    • To make characters bold.
    • Starting tag <B>
    • Ending tag </B>
html elements3
HTML Elements
  • <P> Elements
    • For start of a new paragraph.
  • <A>
    • To add hyper link to the document.
    • <A HREF=“http://www.lsp4you.com”> Tutorials </A>
basic tags1
Basic Tags
  • <hr> horizontal rule
  • <br> new line
  • <b>...</b> bold
  • <i>...</i> italicize text in between
lists
Unordered Lists

<ul>

<li> Apples

<li> Oranges

</ul>

Ordered Lists

<ol>

<li> One

<li> Two

</ol>

Can be nested

Apples

Fuji

Granny Smith

Oranges

Lists
image files
Image Files
  • <imgsrc="URL of image file">
tables
Tables
  • <table>...</table>
  • <tr>...</tr> for each row
  • <td>...</td> for each element in a row
  • <th>…</th> for header row
table example
Table Example

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

comments
Comments
  • <!-- This is a comment -->
  • <!--

This paragraph,

is also a

comment...

-->

special html
Special HTML
  • &lt; → <
  • &gt; → >
  • &amp; → &
  • &nbsp; → space
anchor tag links
Anchor Tag (Links)

Absolute HREFs specify fully qualified URLs.

  • <a href="http://www.yahoo.com/">Yahoo!</a>
  • <a href="reldoc.html">In this directory!</a>
  • <a href="a/doc.html">In sub-directory a!</a>

Relative HREFs are relative to the directory containing the current HTML file.

what is the www
What is the WWW?
  • A hypertext system that runs on top of the Internet, based on Three Main Standards
    • URL
    • HTTP
    • HTML