This Blog is to Let You Learn About the Coding languages That Helps You In Your Coding Future And Too Help In Making Website !!
And I Guarantee That You Will Get Best Tutorials From Anyone Else
So Kindly Stick Your ASS to This Blog :)
I USE : Free Domain Name Registration - Get a Short .co.nr web ... www.freedomain.co.nr/
OTHERS : Free Domain Name - GoDaddy.com Get A Free Domain Now - indiagetonline.in Domain Name Search and Domain Registration | WIX Register a New Domain — Support — WordPress.com Rs 99 India Domain Name Register Domain Names at Register.com - Business Web ... Domain Names Website Forwarding. Web Site Forwarding ... URL Forwarding - Email Forwarding - Domain.com
Attributes provide additional information about HTML elements.
HTML Attributes
HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"
The lang Attribute
The document language can be declared in the <html> tag. The language is declared in the lang attribute. Declaring a language is important for accessibility applications (screen readers) and search engines:
Example
<!DOCTYPEhtml>
<htmllang="en-US"> <body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body> </html>
The title Attribute
HTML paragraphs are defined with the <p> tag. In this example, the <p> element has a title attribute. The value of the attribute is "About hacktech4all":
The href Attribute
HTML links are defined with the <a> tag. The link address is specified in the href attribute:
Example
<ahref="http://www.hacktech4all.blogspot.in">This is a link</a>
Size Attributes
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 asattributes:
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.
Double style quotes are the most common in HTML, but single style can also be used. In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:
Example
<ptitle='John "ShotGun" Nelson'>
Or vice versa:
Example
<
HTML Attributes
Below is an alphabetical list of some attributes often used in HTML:
Attribute
Description
alt
Specifies an alternative text for an image
disabled
Specifies that an input element should be disabled
href
Specifies the URL (web address) for a link
id
Specifies a unique id for an element
src
Specifies the URL (web address) for an image
style
Specifies an inline CSS style for an element
title
Specifies extra information about an element (displayed as a tool tip)
value
Specifies the value (text content) for an input element.
Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading.
Example
<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>
Headings Are Important
Use HTML headings for headings only. Don't use headings to make text BIG or bold. Search engines use your headings to index the structure and content of your web pages. Users skim your pages by its headings. It is important to use headings to show the document structure. h1 headings should be main headings, followed by h2 headings, then the less important h3, and so on.
Example
<p>This is a paragraph.</p> <hr> <p>This is a paragraph.</p> <hr> <p>This is a paragraph.</p>
The HTML <head> Element
The HTML <head> element has nothing to do with HTML headings. The HTML <head> element only contains meta data. The HTML <head> element is placed between the <html> tag and the <body> tag:
Example
<!DOCTYPEhtml> <html>
<head> <title>My First HTML</title> <metacharset="UTF-8"> </head>
<body> . . .
The HTML <title> Element
The HTML <title> element is meta data. It defines the HTML document's title. It will not be displayed in the document. However, it might be displayed in one of the browser tabs.
The HTML <meta> Element
The HTML <meta> element is meta data. It defines the character set used in the HTML document.
More Meta Elements
In the following chapter you will learn more about meta elements: The HTML <style> element defines internal CSS style sheets. The HTML <link> element can define external CSS style sheets.
HTML Tip - How to View HTML Source
Have you ever seen a Web page and wondered "Hey! How did they do that?" To find out, right-click in the page and select "View Page Source" (in Chrome) or "View Source" (in IE), or similar in another browser. This will open a window containing the HTML code of the page.
HTML Tag Reference
' tag reference contains additional information about these tags and their attributes.You will learn more about HTML tags and attributes in the next chapters of this tutorial.
<p>This is a paragraph</p><p>This is another paragraph</p>
HTML Display
You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results. With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code. The browser will remove extra spaces and extra lines when the page is displayed. Any number of spaces, and any number of new lines, count as only one space.
Example
<p> This paragraph contains a lot of lines in the source code, but the browser ignores it. </p>
<p> This paragraph contains a lot of spaces in the source code, but the browser ignores it. </p>
Don't Forget the End Tag
Most browsers will display HTML correctly even if you forget the end tag:
Example
<p>This is a paragraph<p>This is another paragraph
HTML Line Breaks
The HTML <br> element defines a line break. Use <br> if you want a line break (a new line) without starting a new paragraph:
Example
<p>This is<br>a para<br>graph with line breaks</p>
The Poem Problem
Example
<p>This poem will display as one line:</p>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
The HTML <pre> Element
The HTML <pre> element defines a block of pre-formatted text, with structured spaces and lines. To display anything, with right spacing and line-breaks, you must wrap the text in a <pre> element:
Example
<p>This will display as a poem:</p>
<pre>
My Bonnie lies over the ocean. My Bonnie lies over the sea.
<head> <style> body {background-color:lightgray} h1 {color:blue} p {color:green}</style> </head>
<body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body>
</html>
Styling HTML with CSS
CSS stands for Cascading Style Sheets
Styling can be added to HTML elements in 3 ways:
Inline - using a style attribute in HTML elements
Internal - using a <style> element in the HTML <head> section
External - using one or more external CSS files
The most common way to add styling, is to keep the CSS syntax in separate CSS files. But, in this tutorial, the examples are internal, and simplified, to make it easier for you understand it, and try it yourself.
CSS Syntax
CSS styling has the following syntax:
element { property:value ; property:value }
The element is an HTML element name. The property is a CSS property. The value is a CSS value.
Multiple styles are separated with semicolon.
Inline Styling (Inline CSS)
Inline styling is useful for applying a unique style to a single HTML element:
Inline styling uses the style attribute.
This inline styling changes the text color of a single heading:
Example
<h1style="color:blue">This is a Blue Heading</h1>
Internal Styling (Internal CSS)
An internal style sheet can be used to define a common style for all HTML elements on a page. Internal styling is defined in the <head> section of an HTML page, using a <style> element:
Example
<!DOCTYPEhtml> <html>
<head> <style> body {background-color:lightgrey} h1 {color:blue} p {color:green}</style> </head>
<body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body>
</html>
External Styling (External CSS)
External style sheet are ideal when the style is applied to many pages.
With external style sheets, you can change the look of an entire site by changing one file. External styles are defined in the <head> section of an HTML page, in the <link> element:
<body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body>
</html>
CSS Fonts
The CSS property color defines the text color to be used for an HTML element.
The CSS property font-family defines the font to be used for an HTML element.
The CSS property font-size defines the text size to be used for an HTML element.
<body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
The CSS Box Model
Every visible HTML element has a box around it, even if you cannot see it.
The CSS border property defines a visible border around an HTML element:
Example
p { border:1px solid black; }
The CSS padding property defines a padding (space) inside the border:
Example
p { border:1px solid black; padding:10px; }
The CSS margin property defines a margin (space) outside the border:
Example
p { border:1px solid black; padding:10px; margin:30px; }
The id Attribute
All the examples above use CSS to style HTML elements in a general way.
The CSS styles define an equal style for all equal elements.
To define a special style for a special element, first add an id attribute to the element:
Example
<pid="p01">I am different</p>
then define a different style for the (identified) element:
Example
p#p01 { color:blue; }
The class Attribute
To define a style for a special type (class) of elements, add a class attribute to the element:
Example
<pclass="error">I am different</p>
Now you can define a different style for this type (class) of element:
Example
p.error { color:red; }
Deprecated Tags and Attributes in HTML5
In older HTML versions, several tags and attributes were used to style documents. These tags are not supported in HTML5. Avoid using the elements: <font>, <center> and <strike>. Avoid using the attributes: color and bgcolor.
Chapter Summary
Use the HTML style attribute for inline styling
Use the HTML <style> element to define internal CSS
Use the HTML <link> element to define external CSS
Use the HTML <head> element to store <style> and <link> elements
Use the CSS color property for text colors
Use the CSS font-family property for text fonts
Use the CSS font-size property for text sizes
Use the CSS border property for visible element borders
Use the CSS padding property for space inside the border
Use the CSS margin property for space outside the border
Just like "follow the bouncing ball", power up Notepad and start with this...
<html>
</html>
Each one of those is called a tag. There is a starting tag and a closing tag. To make a closing tag just add a / to the starting tag. Most, but not all tags have a closing tag. Think of tags as enclosing a bit of text for the browser to interpret. The browser will interpret everything between <html> and </html> as an HTML document. Different tags are interpreted different ways by the browser. Let's proceed...
Every HTML document needs a pair of head tags.
<html>
<head>
</head>
</html>
The only thing we have to concern ourselves with in the head tags (for now) are the title tags.
<html>
<head>
<title></title>
</head>
</html>
And the bulk of the page is going to be within the body tags.
Oh, and one more thing, give your document a title, and put something in the body.
<html>
<head>
<title>My big old bad page!</title>
</head>
<body>
Hello Joe!
</body>
</html>
Now save it, not as a text document, but as a html document. Save it as page1.html in a new folder somewhere. If yer a little fuzzy about how to do this then here's what you do...
In your Notepad window click File then Save As.
You will be presented with the Save As dialog box. Make a new folder by clicking the New Folder icon in the Save As dialog box.
The New Folder icon will look something like this -->
Name the new folder whatever you want. Then double click on it to open it. Now you're ready to save the file into the the new folder you just made. Where it says File name: type in page1.html Where it says Save as type: make sure it says All Files(*.*)
Hit return and you're done!
Congratulations! You are the proud parent of a fully functional Web Page! You could upload it to a server and the whole world can see your creation! If you are using Internet Explorer, the file you made might look something like this...
(if your icon is a little different, it's no biggie)
You should be able to double click on it now and see the results of your handwork.
FOR VIDEO TUTORIALS : FOR FIRST HTML TUTORIAL WATCH OUT THIS LINK ON YOUTUBE:
Now, it's common for people to get stuck here at saving the file. If you get stuck, just be patient. When you save it, remember where you saved it. and make sure you save it with the file extension .html
Next order of business is to start putting some neato stuff in your page.
The best way to use this tutorial is to run Notepad and two instances of your web browser. One browser window containing this tutorial and the other containing your new page. Just toggle between the three windows. You can open a second instance of your browser in one of two ways...
1) Find the icon of the html file you just made (page1.html) and double click on it. Or...
2) In your browser, click on File/Open File (or something similar to that) and browse to the file (page1.html).
Three quick points before we go on to the next lesson:
What you made is a skeleton HTML document. This is the minimum required information for a web document and all web documents should contain these basic components.
The document title is what appears at the very top of the browser window.
Of all the things on your web page, the title is what search engines consider most when ranking a page. Choose your titles carefully, and keep them brief.
