HTML tags - CBiS Education

Download Report

Transcript HTML tags - CBiS Education 

To
An easy way to explain the internet is to think of your school computers
all linked together into a network that you can put information into and
get information out that you and other people in your school have put in.
Now imagine that a friend from another school wants to use your
information and give you some of hers. You both connect your
computers to modems that allow your computers to share information.
Other networks can connect to yours and to other networks. This is
called inter-networkingor the internet as it became known.
It is a way of sending information from one computer to another
anywhere in the world using phones or satellites, radio links and a lot of
other ways.
In the 1960s a group of researchers working for the USA Government Defence
Department invented a computer network that could keep working even if some
of the computers were lost or damaged, eg during a war or a natural disaster.
It was called the ArpaNet
Over the next 20 years or so big businesses, universities and other researchers
joined this network until they made a web of networks that were all linked.
Then ordinary people started to use the internet and today there are millions of
people all over the world who can use the internet in lots of different ways.
There are two things that you have to be aware of on the internet.
1.
Keeping your personal details safe.
2.
Being aware that people are not always who they pretend to be.
HTML
In 1990, Tim Berners-Lee develops HTML, which
made a huge contribution to how we navigate and
view the Internet today
WWW
Tim Berners-Lee introduces WWW to the public on August 6,1991. The World Wide Web
(WWW) is what most people today consider the "Internet" or a series of sites and pages
that are connected with links. The Internet as a whole had hundreds of people who helped
developed the standards and technologies that make it what it is today, but without the
WWW the Internet would not be as popular and useful as it is today.
The first website at CERN - and in the world - was dedicated to the World Wide
Web project itself and was hosted on Berners-Lee's NeXT computer. The
website described the basic features of the web; how to access other people's
documents and how to set up your own server. The NeXT machine - the original
web server - is still at CERN. As part of the project to restore the first website, in
2013 CERN reinstated the world's first website to its original address.
On 30 April 1993 CERN put the World Wide Web software in the public
domain. CERN made the next release available with an open licence, as a more
sure way to maximise its dissemination. Through these actions, making the
software required to run a web server freely available, along with a basic
browser and a library of code, the web was allowed to flourish.
HTML is a markup language for describing web documents (web pages).
HTML stands for Hyper Text Markup Language
A markup language is a set of markup tags
HTML documents are described by HTML tags
Each HTML tag describes different document content
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The DOCTYPE declaration defines the document type to be HTML
The text between <html> and </html> describes an HTML document
The text between <head> and </head> provides information about the
document
The text between <title> and </title> provides a title for the document
The text between <body> and </body> describes the visible page content
The text between <h1> and </h1> describes a heading
The text between <p> and </p> describes paragraph
Using this description, a web browser can display a document with a
heading and a paragraph.
HTML Headings
HTML headings are defined with the <h1> to <h6> tags:
Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
HTML paragraphs are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML links are defined with the <a> tag:
Example
<a href="http://www.w3schools.com">This is a link</a>
Or
<a href=“dojo.html">Carmarthen Coder Dojo</a>
The link address is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), and size (width and height) are
provided as attributes:
Example
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
<img src=“code.png" alt=“Coding is cool" width=“256" height=“256">
HTML paragraphs are defined with the <p> tag.
In this example, the <p> element has a title ( Tooltip )attribute. The
value of the attribute is "About W3Schools":
<p title="About W3Schools">
W3Schools is a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>
HTML links are defined with the <a> tag. The link address is specified in
the href attribute:
<a href="http://www.w3schools.com">This is a link</a>
HTML images are defined with the <img> tag.
The filename of the source (src), and the size of the image (width and height) are all
provided as attributes:
<img src="w3schools.jpg" width="104" height="142">
The alt attribute specifies an alternative text to be used, when an HTML
element cannot be displayed.
The value of the attribute can be read by "screen readers". This way, someone
"listening" to the webpage, i.e. a blind person, can "hear" the element.
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
HTML <li> Tag
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Tag
Description
<b>
Defines bold text
<br>
Defines a single line break
<u>
Defines text that should be
stylistically different from
normal text
Your Exercise:
Add a tooltip to the paragraph below.
Hint: Use a title attribute.
Your Exercise:
Change the size of the image below.
Your Exercise:
Change the destination of the link .
Check out :-
http://www.codecademy.com/en/tracks/web
And
http://www.w3schools.com/html/default.asp