Start Learning HTML with CSS and XHTML

Sunday 2 February 2014

5 Hyper Text

we kicked the tires of HTML and found it to be a nice markup language (the ‘ML’ in HTML) for describing the structure of Web pages. Now we’re going to check out the ‘HT’ in HTML, hypertext, which will let us break free of a single page and link to other pages. Along the way we’re going to meet a powerful new element, the <a> element– you’re about to learn some hypertext.
You are asked to create a website for Our Lounge. It will be nice if customers could view a list of the refreshing elixirs? Even better, we should give customers some real driving directions so they can find the place.

4 REVIEW-1

HTML and CSS are the languages we use to create web pages.
Web servers store and serve Web pages, which are created from HTML and CSS.
Browsers retrieve pages and render their content based on the HTML and CSS.
HTML is an abbreviation for Hyper Text Markup Language and is used to structure your web page.
CSS is an abbreviation for Cascading Style Sheets, and is used to control the presentation of your HTML.
Using HTML we mark up content with tags to provide structure. We call matching tags, and their enclosed content, elements.
An element is composed of three parts: an opening tag, content and a closing tag.
There are a few elements, like <img>, that are an exception to this rule.
Opening tags can have attributes. We have seen a couple: type and align.
Closing tags have a “/” after the left angle bracket, in front of the tag name to distinguish them as closing tags.
Your pages should always have an <html> element along with a <head> element and a <body> element.
Information about the Web page goes into the <head> element.
What you put into the <body> element is what you see in the browser.
Most white space (tabs, returns, spaces) are ignored by the browser, but you can use these to make your HTML more readable (to you).
CSS can be added to an HTML Web page by putting the CSS rules inside the <style> element. The <style> element should always be inside the <head> element.
You specify the style characteristics of the elements in your HTML using CSS.

Previous

Saturday 1 February 2014

3. Introducing CSS

Till now we have our two html pages "index.html", "mission.html" which describes the structure of the content in your files. When the browser displays your HTML, it uses its own built-in default style to present this structure.
How to create your own style to present the structure: That’s where CSS(Cascading Style Sheets) comes in. CSS gives you a way to describe how your content should be presented. Let’s get our feet wet by creating some CSS that makes the Starbuzz page look a little more presentable.
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
Insert the <style> element in the head of your index.html and save it.

Open the index.html in the browser.

Wow, it looks pretty cool!

Congratulation you have created your own style for presenting!

What actually we have done:

<head>

<title>Starbuzz Coffee</title>

</style>

</head>

<style> tag is placed inside the head
<style> tag requires an attribute, called type which tells the browser the kind of style you’re using. Because you are using CSS, you need to specify the “text/css” type.
you define the styles in between the <style> and </style> for the page.

body means all the CSS between the “{” and “}” applies to content within the HTML <body> element.
background-color: #d2b48c; Sets the background color to a tan color(#d2b48c hex code).
margin-left: 20%; Sets the left margins to take up 20% of the page.
margin-right: 20%; Sets the right margins to take up 20% of the page.
border: 1px dotted gray; Defines a border around the body that is dotted and the color gray.
padding: 10px 10px 10px 10px; Creates some padding around the body of the page.
font-family: sans-serif; Defines the font to use for text.

Similarly add the same <Style> element in head part of the mission.html.

Previous Next

2.My First HTML page

If the CEO of a fast growing Coffee shop asks you to create a website and he gave you some thing on a paper.
Thanks for giving us a hand!
On the Web page we just need something simple (see below) that includes the beverage names, prices, and descriptions.

House Blend, $1.49
A smooth, mild blend of coffees from Mexico, Bolivia
and Guatemala.

Mocha Cafe Latte, $2.35
Espresso, steamed milk and chocolate syrup.

Cappuccino, $1.89
A mixture of espresso, steamed milk and foam.

Chai Tea, $1.85
A spicy drink made with black tea, spices, milk and honey.

Open the notepad++ and create a new text file. Type in the information given by CEO and save it as index.html

When you open the index.html in a browser it will be look like this.

The result is little unsatisfying. We just got only the content of the web page. HTML gives you a way to tell the browser about the structure of your page.i.e.marking up your text so that the browser knows what’s a heading, what text is in a paragraph, what text is a subheading, and so on. Once the browser knows a little about the structure, it can display your page in a more meaningful and readable manner.

Here is a few HTML tags which tells the browser about the structure.

<h1>: start of heading </h1>: end of heading
<h2>: start of subheading </h2>: end of subheading
<p>: start of paragraph </p>: end of paragraph

Just by using this simple tags, you modify the previous index.html file like this and save it.

You have an HTML file with markup – does that make a Web page?

we just need to add <html>, <head>, <title>, and <body> tags to make this a first class HTML page...

<html> : this tells the browser the content of the file is HTML.
<head> : the head contains information about your Web page, like its title.
<title> : put a title inside the head, it usually appears at the top of the browser window.
<body>: The body contains all the content and structure of your Web page – the parts of the Web page that you see in your browser.

Go ahead and change your “index.html” file by adding in the <head>, </head>, <title>, </title>, <body> and

</body> tags. Make sure you separate the head and body while writing HTML.

Once you have done that, save your changes and reload the file into your browser.Now things look a bit better.The browser has interpreted your tags and created a display for the page that is not only more structured but also more readable.

Congratulations, you have just written your first HTML!

Starbuzz CEO: Oh, I forgot to mention, we need our company mission on a page, too.

Starbuzz Coffee’s Mission

To provide all the caffeine that you need to power your life.

Just drink it.

Create a new text file.Type the information given by CEO using tags and save it as "mission.html" in the same folder as your “index.html” file.

Open the mission.html in the browser.

Previous Next

1. Introduction

Start

You should have: A text editor(notepad, notepad++), a browser(internet explorer, Google chrome)

What is HTML: Hyper Text Markup Language is the main markup language for creating web pages and other information that can be displayed in a web browser.

The steps involved in the process of how the browser interacts with web server are:

HTTP Request: Web Browser requests HTML pages or other resources like Images from server via URLs.
The server is just a computer connected to the Internet waiting for requests from browsers.It stores HTML files, pictures, sound and other file types.
HTTP Response: The server “serves up” Web pages(HTML pages) and sends them to the browser.
The browser receives the HTML pages and displays them.

Next