HTML Hyperlinks, HTML Styles, HTML CSS

0 97

HTML Hyperlinks, HTML Styles, HTML CSS tutorial

in this tutorial you will learn about HTML Hyperlinks, HTML Styles, HTML CSS

HTML Hyperlinks

Every website is a consist on large amount of web pages these all pages are link with each other through linking when a user clicked on required web page it will jump from one page to another page. These tasks can be achieved by creating hyperlinks in HTML. The a (anchor) element is used to create hyperlink in HTML, we can specify text or image as a hyperlink, whenever user move over such content than courser will change into hand.

<a> anchor tag attributes are

Attribute Description
href Specifies the URL of the Web page to be linked or the value of the name attribute.
hreflang Indicates the language of the destination URL.
name Specifies the section of the Web page which is to be linked.
<!DOCTYPEhtml>
<html>
<head>
<title>html image as a hyperlink</title>
</head>
<body>
<h1>HTML image as a hyperlink>/h1>
<a href="www.exceptionbound.com">
<img src="free_learn_html5_tutorials.gif" width="285" height="290" alt="HTML5"/>
</a> 
</body>
</html>

HTML Target Attributes

Target Attribute specify the location of the linked web page will open, when clicked its link. You can assign value to the target attribute.

Value Description
_blank opens your target URL in a new blank window.
_self open your target URL in the same window as that of the current Web page.
_top opens you target URL in the complete area of window.
<!DOCTYPEhtml>
<html>
<head>
<title>html image as a hyperlink with Target attribute and its values</title>
</head>
<body>
<h1>HTML image as a hyperlink >/h1>
<a href="www.exceptionbound.com" target="_blank">
<img src="free_learn_html5_tutorials.gif" width="285" height="290" alt="HTML5"/>
</a>
<a href="www.exceptionbound.com" target="_self">
<img src="free_learn_html5_tutorials.gif" width="285" height="290" alt="HTML5"/>
</a>
<a href="www.exceptionbound.com" target="_top">
<img src="free_learn_html5_tutorials.gif" width="285" height="290" alt="HTML5"/>
</a> 
</body>
</html>

HTML Hyperlink to an E-mail Address

We can even apply hyperlink to email address as the same way they can be given for web pages, To add an email to a hyperlink the href attribute must be used followed by mailto:email address.

<!DOCTYPEhtml>
<html>
<head>
<title>Html Hyperlink to an E-mail Address</title>
</head>
<body>
<h1>Html Hyperlink to an E-mail Address</h1>
<a href="mailto:[email protected]" target="_blank">Click here to send E-mail</a>
</body>
</html>

To automatically add subject line in your new email message the ?subject= attribute used after the email address.

<!DOCTYPEhtml>
<html>
<head>
<title>To automatically add subject line in your new email massage </title>
</head>
<body>
<h1>to add subject line in your new email massage </h1>
<p>To give space bewteen words use %20 </p>
<a href="mailto:[email protected]?Subject=Hello%20again" target="_blank">Click here to send E-mail</a>
</body>
</html>

HTML Hyperlink to Other files

In HTML you can make hyperlink of others files such as zipped files (.zip), executable files (.exe), documents (.doc), PDF reader files (.pdf), graphical .jpg .gif and so on.

<!DOCTYPEhtml>
<html>
<head>
<title>To make a download link of files</title>
</head>
<body>
<h1>To download Compressed zip file</h1>
<a href="Compressed (zipped) Folder.zip" target="_blank">Click here to download the compressed zip file</a>
</body>
</html>

HTML Styles

Every html element has a its own default style like text color black, background white etc. we can change this default styling in html using style attribute, using style attribute not only we can change color also we can give height width positioning, margin, padding etc.

<!DOCTYPEhtml>
<html>
<head>
<title>html Style</title>
</head>
<body style="background-color:#296;">
<h1 style="text-align:center">HTML inline style attribute</h1>
<p style="font-size: 25px; color: purple;"> My first paragraph </p>
</body>
</html>

HTML Text Color

Using color property with style attribute we can change text color.

<!DOCTYPEhtml>
<html>
<head>
<title>html Text color</title>
</head>
<body style="background-color:#296;">
<h1 style="text-align:center">Lorem ipsum</h1>
<p style="font-size: 25px; color: purple;"> My first paragraph </p>
</body>
</html>

HTML Text Size

Using font-size property with style attribute we can change text size.

<!DOCTYPEhtml>
<html>
<head>
<title>html Text size</title>
</head>
<body style="background-color:#296;">
<h1 style="text-align:center">Lorem ipsum</h1>
<p style="font-size: 28px; color: purple;"> My first paragraph </p>
</body>
</html>

HTML Text Alignment

Using text-align property with style attribute we can set horizontal text alignment for element.

<!DOCTYPEhtml>
<html>
<head>
<title>html Text Alignment</title>
</head>
<body style="background-color:#296;">
<h1 style="text-align:center">Lorem ipsum</h1>
<p style="font-size: 28px; color: purple;"> My first paragraph </p>
</body>
</html>

HTML Fonts

Using font-family property with style attribute we can set any font for element.
Note <font> tag not supported in new html 5 version.

<!DOCTYPEhtml>
<html>
<head>
<title>html fonts</title>
</head>
<body style="background-color:#296;">
<h1 style="text-align:center">Lorem ipsum</h1>
<p style="font-size: 28px; font-family:'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; color: purple;"> My first paragraph </p>
</body>
</html>

HTML CSS

CSS cascading style sheet language informs to browser how to present content of the document and how it’s should looks like.in other word html defines content of the webpage where CSS defines how element are to be displayed in browser.
General syntax of CSS consist of three parts and there are selector, property and value.

HTML CSS

<!DOCTYPEhtml>
<html>
<head>
<title>HTML CSS style</title>

<style>
body {
background-color:green; 
}
p {
color:white;
}
</style> 

</head>
<body>

<h1>CSS style in html</h1>
<p>This example explain that how to add style and title in head element.</p>

</body>
</html>

Types of CSS Style Sheets

There are three types of CSS style sheets and namely there are inline, internal or embedded, and external style sheets. but the most common and recommended way is keep CSS file separate and add that file link in head element.

CSS inline Style

An inline style placed directly in HTML element by using style attribute ,a web designer can’t reuse inline style at any point of time in webpage anywhere.

<!DOCTYPEhtml>
<html>
<head>
<title>HTML CSS style</title>

</head>
<body>

<h1 style="font-size:30px;">This is my heading.</h1>
<p style="font-weight:bold">This my paragraph .</p>

</body>
</html>

CSS internal or embedded

An internal or embedded styles are placed in head element to define a common style for your html elements. These styles can be re-used in the same Web page in which they are placed.

<!DOCTYPEhtml>
<html>
<head>
<title>HTML CSS style</title>

<style>
body {
background-color:green; 
}
p {
color:white;
}
</style> 

</head>
<body>

<h1>CSS style in html</h1>
<p>This example explain that how to add style and title in head element.</p>

</body>
</html>

CSS external style sheet

External style sheet always defined in a separate file with extension of .css. External style sheet provides the benefit of reusability of implementing common style rules for multiple HTML pages. External style sheet widely used and recommended way also to reuse the css anywhere in your webpage.

<!DOCTYPEhtml>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 

</head>
<body>

<h1>CSS stylesheet link</h1>
<p>This example explain that how to add CSS stylesheet link in head.</p>

</body>
</html>

HTML class Attribute

To define a special type of css style to html element class Attribute is used.

<!DOCTYPEhtml>
<html>
<head>
<title>Class attribute</title>
<style>
.paragraph{
font-size:18px;
color:red;
}
</style> </head>
<body>

<h1>Class attribute>/h1>
<p class="paragraph">Class attribute specify class name of your html element, class attribute will assign more subtype, these subtypes can be used later in CSS for styling your html content or with java script to change or add behavior etc.</p>

</body>
</html>

HTML id Attribute

To define a special type of css style to one Html element id Attribute is used.

<!DOCTYPEhtml>
<html>
<head>
<title>Class attribute</title>
<style> 
#paragraph{ 
font-size:18px; 
color:red; 
} 
</style>
</head>
<body>

<h1>id attribute>/h1>
<p id="paragraph">To define a special type of css style to one Html element id Attribute is used.</p>

</body>
</html>

CSS Box Model

To define a border around your element the border property used.

<!DOCTYPEhtml>
<html>
<head>
<title>CSS Box Model</title>
<style> 
div{ 
background-color: lightgrey;
width: 400px;
padding: 25px;
border: 20px solid navy;
margin: 20px;
} </style>
</head>
<body>

<h1>CSS Box Model</h1>
<div><p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>

</body>
</html>

CSS padding

padding property will define space inside table or border.

<!DOCTYPEhtml>
<html>
<head>
<title>CSS padding</title>
<style> 
p {
background-color: #e9eaed;
}
div{ 
padding-top: 25px;
padding-right: 50px;
padding-bottom: 25px;
padding-left: 50px;
}
</style>
</head>
<body>

<h1>CSS padding</h1>
<p> This paragraph without apply padding </p>
<div><p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>

</body>
</html>

CSS margin

margin property will define space outside table or border.

<!DOCTYPEhtml>
<html>
<head>
<title>CSS margin</title>
<style> 
p {
background-color: #e9eaed;
}
div{ 
margin-top: 150px;
margin-bottom: 120px;
margin-right: 150px;
margin-left: 80px;
}
</style>
</head>
<body>

<h1>CSS margin</h1>
<p> This paragraph without apply margin </p>
<div><p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>

</body>
</html>

Comments

comments

Leave A Reply

Your email address will not be published.