<html>
<body>
<h1>My First Heading</h1> <!-- This is a comment, h1 is the most important heading-->
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<p>My first paragraph.</p> <!-- This is a comment, use the end tag / -->
<hr />
<!-- This is a comment, hr creates a horizontal line-->
<p>This is a paragraph.</p>
<hr />
<p>This is another paragraph.</p>
<hr />
<p>This is<br />a para<br />graph with line breaks</p>
<!-- This is a comment, use the <br /> tag if you want a line break (a new line) without starting a new paragraph -->
<a href="http://www.jsnyder.co.uk">This is a link</a>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
<img src="url" alt="some_text"/>
<img src="profile.jpg" alt="Profile photo" width="300" height="220" />
<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>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<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>
<ul>
<li>Bullet point list 1</li>
<li>Bullet point list 2</li>
</ul>
<ol>
<li>Ordered number list 1)</li>
<li>Ordered number list 2)</li>
</ol>
<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
<form>
Password: <input type="password" name="pwd" />
</form>
<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
<address>
Written by JSnyder.co.uk<br />
<a href="mailto:snyder.webmaster@googlemail.com">Email us</a><br />
Address: Maidstone, Kent, UK<br />
Phone: +447914011154
</address>
</body>
</html>
<html>
<head>
<title>This text appears in the title bar.</title>
</head>
<body>
<h1 align = “center”>Heading 1</h1>
<! This is text alignment. >
<p align = “right”>This text appears on the web page.</p>
</body>
</html>
<html>
<head>
<title>This text appears in the title bar.</title>
</head>
<body>
<p>This text appears <b>bold</b>.</p>
<p>This text appears <i>italicized</i>.</p>
<p>This text appears <u>underlined</u>.</p>
<! This is text formatting. >
</body>
</html>
#xxyyzz represents a color code
The xx portion defines the amount of red,
the yy defines the amount of blue,
the zz defines the amount of green
00 is n absence of colour
FF is the maximum amount of a color
<! These are the colour codes. >
Red #FF0000
Turquoise #00FFFF
Light blue #0000FF
Dark blue #0000A0
Light purple #FF0080
Dark purple #800080
Yellow #FFFF00
Pastel green #00FF00
Pink #FF00FF
White #FFFFFF
Light grey #FFFFCC
Black #000000
Orange #FF8040
Brown #804000
Burgundy #800000
Forest green #808000
Grass green #408080
<html>
<head>
<title>This text appears in the title bar.</title>
</head>
<body>
<p>This text appears in <font color =
#FF0000>red</font> on the web page.</p>
<! This displays text in red. >
</body>
</html>
<html>
<head>
<title>This text appears in the title bar.</title>
</head>
<body>
<p>This text appears <font size = 7>large</font> on the
web page.</p>
<! This is the largest size 7; defining a size 1 is the smallest. >
</body>
</html>
<html>
<head>
<title>This text appears in the title bar.</title>
</head>
<body>
<img src = “profile.jpg”>
<! This is adding a graphic image. >
</body>
</html>
<body bgcolor = #xxyyzz>
<! This is defining a background. >
<body bgcolor = #xxyyzz background = “filename.ext”>
<! This is defining both a background colour and a background image. >
<a href = “address www index.html”>hyperlink text</a>
<! This is creating a hyperlink. >
<a href = “www.jsnyder.co.uk”>James Snyder</a>
<! This is turning the phrase James Snyder into a link. >
<a name = “#anchorname”>Anchor text here</a>
<! This is defining an anchor point name. >
<a href = “#anchor point”>Jump to anchor point</a>
<! This is hyperlinking to an anchor point. >
<a href = “webpage.html#anchor point”>Jump to anchor
point</a>
<! This is linking to an anchor point on another web page filename. >
<table align = “center”> </table>
<! This is defining alignment in a table. >
<table border = “2”> </table>
<! This is defining the border in a table. >
<table cellpadding = “2” cellspacing = “3”> </table>
<! This is defining cell padding and spacing in a table. >
<table width = “75”> </table>
<! This is defining the width of a table. >
<html>
<head>
<title>This text appears in the title bar.</title>
</head>
<table border = “1”>
<th>Column 1</th>
<! This is defining the heading of a table. >
<th>Column 2</th>
<! This is creating another column in my table. >
</table>
</html>
<html>
<head>
<title>This text appears in the title bar.</title>
</head>
<table border = “1”>
<th>Column 1</th>
<th>Column 2</th>
<tr>
<! This is defining a row . >
<td>Stuff here</td>
<! This is filling the row. >
<td>Useful data</td>
</tr>
<tr>
<td>Second row</td>
<td>More data</td>
</tr>
</table>
</html>
<html>
<head>
<title>This text appears in the title bar.</title>
</head>
<table border = “1”>
<caption>This is a table caption that appears above the table.</caption>
<thead>
<! This is the header . >
<tr>
<td>This is a table header</td>
</tr>
</thead>
<th>Column 1</th>
<th>Column 2</th>
<tr>
<td>Stuff here</td>
<td>Useful data</td>
</tr>
<tr>
<td>Second row</td>
<td>More data</td>
</tr>
<tfoot>
<tr>
<td>This is a table footer</td>
</tr>
</tfoot>
</table>
</html>
<html>
<head>
<title>This text appears in the title bar.</title>
</head>
<style>
<!--
h1 {
color : #FF0000;
}
-->
<! This is displaying the colour red for all the heading 1 text . >
</style>
</head>
<body>
<h1>This heading is defined by the style.</h1>
</body>
</html>
The following stylesheet defines text in both the <h1> heading and the <p>
paragraph text:
<html>
<head>
<title>This text appears in the title bar.</title>
</head>
<style>
<!--
h1 {
color : #FF0000;
}
p {
color : #00FF00;
background-color: $FF0000;
text-align : center;
}
-->
<! This is a stylesheet to define text in both the h1 heading and the p paragraph text . >
</style>
</head>
<body>
<h1>This heading is defined by the style.</h1>
<p>This is text is modified by the paragraph style.</p>
</body>
</html>
<html>
<head>
<title>This text appears in the title bar.</title>
</head>
<style>
<!--
h1 {
color : #FF0000;
}
p {
color : #00FF00;
background-color: $FF0000;
text-align : center;
}
-->
<! This is a style class that defines the formatting in the paragraph. >
</style>
</head>
<body>
<h1>This heading is defined by the style.</h1>
<p>This is paragraph text gets modified by the paragraph
style.</p>
<p>This is paragraph text also gets modified.</p>
</body>
</html>
<html>
<head>
<title>This text appears in the title bar.</title>
</head>
<style>
<!--
.firstclass {
color : #FF0000;
}
.secondclass {
color : #00FF00;
text-align : center;
}
-->
</style>
<! Style classes apply formatting to text in all of these main tags . >
</head>
<body>
<h1 class = “firstclass”>This heading is defined by the firstclass style.</h1>
<p class = “firstclass”>This is paragraph text gets modified by the firstclass style.</p>
<p class = “secondclass”>This is paragraph text gets modified by the secondclass style.</p>
</body>
</html>
<link rel = “stylesheet” jref = “stylesheet.css” type =
“text/css” media = “screen”>
<! This includes a stylesheet file that has been stored separately from the HTML page via the link tag . >
<link> tag like this:
<html>
<link rel = “stylesheet” href = “./styleme.css” type =
“text/css” media = “screen”>
<head>
<title>This text appears in the title bar.</title>
</head>
<body>
<h1 class = “firstclass”>This heading is defined by the firstclass style.</h1>
<p class = “firstclass”>This is paragraph text gets modified by the firstclass style.</p>
<p class = “secondclass”>This is paragraph text gets modified by the secondclass style.</p>
</body>
</html>
<html>
<! This is where I have two external stylesheets that format the same text.
I define the order to apply the external stylesheets using the link tags . >
<link rel = “stylesheet” href = “./file1.css” type =
“text/css” media = “screen”>
<link rel = “stylesheet” href = “./file2.css” type =
“text/css” media = “screen”>
<! This file2 stylesheet takes precedence over the styles stored in file1 . >
<body>
<! Any styles stored in the HTML code takes precedence over any styles stored in css external files . >
</body>
</html>
<html>
<script language=javascript>
document.writeln(“This is a simple JavaScript program.”);
</script>
<body>
</body>
</html>
<html>
<script language=javascript>
<!--
function hello() {
window.alert(“This is also a simple JavaScript
program.”);
}
-->
</script>
<body onLoad = “hello()”>
</body>
</html>
<html>
<script language=javascript src=”filename.js”></script>
<body>
</body>
</html>
<html>
<body>
<?php
echo “<h1>Greetings from PHP.</h1>”;
?>
</body>
</html>
GET /encrypted-area HTTP/1.1
Host: www.example.com
<! GET requests a page from a server. The response from the server was always an HTML page.
Request line, such as GET /images/logo.png HTTP/1.1, requests a resource called /images/logo.png from server
GET Requests a representation of the specified resource. Requests using GET are for retrieval. HTTP servers are required to implement at least the GET methods for logging, caching, the serving of banner advertisements or incrementing a web counter.>
GET /encrypted-area HTTP/1.1
Host: www.example.com
<! GET requests a page from a server. The response from the server was always an HTML page.
Request line, such as GET /images/logo.png HTTP/1.1, requests a resource called /images/logo.png from server
GET Requests a representation of the specified resource. Requests using GET are for retrieval. HTTP servers are required to implement at least the GET methods for logging, caching, the serving of banner advertisements or incrementing a web counter.>
1 comment:
XML/HTML/XHTML is a structured way of describing the skeleton of a webpage.
Post a Comment