Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

HTML

introduction, elements ,basic tags, attributes, XHTML, doctype, CSS and new in HTML5
by

Devika Panchasara

on 31 July 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of HTML

HTML
HTML
Invented in 1990 by a scientist called Tim Berners-Lee
purpose - to make it easier for the scientist of different universities to get access to each others document.
this was the foundation of world wide web.
It is a language which makes it possible to present information on the internet.
Difference between html and htmls
html5 has defined error handling.
new elements - section, video, canvas, progress, nav, meter, time, aside
new attributes - date and time, ping, charsat, async
html5 introduces a number of api which help creating web applications.
Hyper Text Markup Language
Hyper - opposite of liner. old computer program - linear. but in html - you can go wherever you want and whenever.
text
markup - is what you do with the text. for ex. bold, heading etc.
language
meaning of HTML
XHTML
Extensible hypertext markup language
Html elements and tags
elements gives structure to html page. tells browser how page will look on internet.
tags are labels used to markup the begining and end of element.
for ex. <em> this is example. </em>
em is an element to emphasis the text.
<em> is starting tag
</em> is ending tag.
empty element which is not connected to a specific passage - <br />
both uppercase and lowercase tags are same.
<head> : information about the document.
<body> : content of the document.
<title> : title of the page to appear on the top bar of your browser.
<hr/> : horizontal rule. to draw line.
tags related to list
<ul> : unordered list. - bullet for each list item.
<ol> : ordered list. - number for each list item.
<li> : to make item in the list.
example:

<ol>
<li> list item 1 </li>
<li> list item 2 </li>
</ol>
<ul>
<li> list item 1 </li>
<li> list item 2 </li>
</ul>
Attributes
In some elements you can add more information. this information is known as attributes.
Attributes always written in start tag and followed by equal sign and the details written between inverted comma.
Note: some tags and attributes uses US spelling. for ex. color instead of colour.
tag used for links
<a href> : a means "Anchor" and href means "hypertext reference".
"../" points to the folder one level up from the position of the file from which the link is made.
you can also point two or more folders up by writing "../../".
Internal links within the page using id
<h1 id=heading1> this is heading 1 </h1>

<a href = "#heading1"> link to heading 1 </a>
link to an e-mail address
<a href= "mailto: username@mail.com"> send mail to this id </a>
title for a link
image tag
<img src="here you will right the source of the image" alt="xyz "/>
also one can use image as a link too
for ex.
<a href= "http://www.gusani.com/"><img src="c:/logo.png"> </a>
alt attribute is used as give an alternative description if, for some reason, the image is not shown to the user.
other attribute of the image tag can be title, width, height, etc.
Tables
<table>
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
output:
cell 1 cell 2
cell 3 cell 4
<table>
<td>
<tr>cell 1</tr>
<tr>cell 2</tr>
</td>
<td>
<tr>cell 3</tr>
<tr>cell 4</tr>
</td>
output:
cell 1 cell 3
cell 2 cell 4
Tags and Attributes
tr - table row td - table data
align - horizontal alignment of the content in the entire table,in a row or a single cell.
valign - vertical alignment of the content in a cell. for ex. top, middle or bottom.
colspan - "column span" - used in td tag.
to specify how many columns the cell should span.
rowspan - "row span" - used in td tag.
to specify how many rows the cell should span.
layout (cascading style sheets )
html - rough touch (structure)
css - nice touch (layout)
css can be added with style attribute.
manage your layout centrally
instead of using style attribute for every tag, you can tell the browser once how it must layout all the text in the page.
css
css can also be used to control the page setup and presentation(margin, alignment,width, height, etc.).
<p style = "padding:12px; border: 1px solid red;"> i am Gusani </p>
W3C standard
world wide web consortium
same HTML standards for all the browser.
When you code HTML following the W3C standard, you make the websites that can be seen by all the browsers.
This new and stricter and cleaner version of HTML is known as XHTML.
Doc Type Declaration
tell the browser which "dialect" your html is in.
in xhtml - you can create your own tags instead of just using the default ones.
<audio>
<video>
<article>
<footer>

combination of html and xml.
<basefont>
<big>
<center>
<font>
<strike>
<tt>

New tags in HTML 5
Tags removed in HTML5
<frame>
<frameset>
<noframes>
updated tags and their names:
acronym (use abbr instead)
applet (use object instead)
isindex (use form controls instead)
dir (use ul instead)
Doctype is simple in HTML5:
<!Doctype html>
Semantic tags:
tags that works the same way as their name.
for ex. <header>, <footer>, <article> etc.
block level(Structural) elements
inline level elements
elements that defines the structure of the website.
There are some cool little tools that you can use in addition to Notepad that may make life a bit easier:

HTML5Reset: Take your old website designs and re-write as HTML5.
Liveweave: Test your HTML5 code in different browsers and play around with it.
Examples: <h1>, <p>, <table>, <ul>.
<article>: any content that consider as complete.
<section>: used as section of an article.
<header>: for ex. title of page.
<footer>:for ex. copyright
Class
attach information to an element so we can do more things with some or all the elements that belongs to a certain class.
for ex. <article class= "fency">
ID
they are meta data which you can attach to elements.
id is a unique identifier to an element.
they must start with letter.
among 15 global attributes of the elements . id is the most important element.
target attribute in link tag.
link to open in new browser window.
<a target="_blank" href= "xyz link"> link title </a>
two categories of linking.
link to external resources
regular hyperlink
Inline elements are found inside sentences usually and wouldn't indicate that content should start on a new line. Examples: <b>, <img>, <em>.
Scripts
easy way to link scripting language into HTML 5 page.
<script>
document.write("Hello from HTML.net!")
</script>
to reuse the script, save the file with .js extension and refer to it from the script element.
<script src="myscript.js"/>
metadata
information about the page.
used by browser and search engine.
it always included in head element.
it is good practice to add this four lines of meta tags to every page,but modifying the content in each case to match the content of the page.
<head>
<meta name="description" content="Free HTML5 tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="HTML.net">
<meta charset="UTF-8">
</head>
viewports
this makes sure your content is available no matter what device is used to browse the website.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Comments
<!--Reminding myself to check this code for HTML5 validity-->
API - Application Programming Interface
a way to send instructions between programs. also can be between browser and webpage.
drawing, audio/video, drag and drop, autofocus, editable, history
New Elements
New Attributes
Full CSS3 Support
Video and Audio
2D/3D Graphics
Local Storage
Local SQL Database
Web Applications

HTML 5
Full transcript