Showing posts with label Html5 tutorial. Show all posts

Saturday, 6 May 2023

CSS Icons

desing17:04bestwebdesign, css padding, Html5 tutorial 1 comment:

CSS Icons

How To Add Icons

The simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome.

Add the name of the specified icon class to any inline HTML element (like <i> or <span>).

All the icons in the icon libraries below, are scalable vectors that can be customized with CSS (size, color, shadow, etc.)

Font Awesome Icons

To use the Font Awesome icons, go to fontawesome.com, sign in, and get a code to add in the <head> section of your HTML page:

<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>

xample

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>

<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

</body>
</html>

Yourself Try

Bootstrap Icons

To use the Bootstrap glyphicons, add the following line inside the <head> section of your HTML page:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Note: No downloading or installation is required!

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>

<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

</body>
</html>

Yourself Try

Google Icons

To use the Google icons, add the following line inside the <head> section of your HTML page:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Note: No downloading or installation is required!

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>

</body>
</html>

Yourself Try

Wright © bestwebdesign and Graphics design

JavaScript

desing13:20Html, Html5 tutorial No comments:

HTML JavaScript

The <script> tag is utilized to characterize a customer side content (JavaScript).

The <script> element either contains scripting articulations, or it focuses to an outside content record through the src trait.

Regular uses for JavaScript are image control, shape approval, and dynamic changes of substance.

To choose a HTML element, JavaScript all the time utilize the document.getElementById(id) technique.

This JavaScript case expresses "Hi JavaScript!" into a HTML element with id="demo":

Example

JavaScript can change HTML styles

document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";

Iframes

desing13:13Html, Html5 tutorial No comments:

HTML Iframes

Iframe - Set Height and Width

Use the height and width attributes to specify the size of the iframe.
The attribute values are specified in pixels by default, but they can also be in percent (like "80%").

Example

classes

desing12:51Html, Html5 tutorial No comments:

HTML classes

Example

Using CSS to style all elements with the class name "city":

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.city {
  background-color: tomato;
    color: white;
    padding: 10px;} </style>
</head>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

Lists

desing12:41Html, Html5 tutorial No comments:

HTML Lists

Unordered List:

Item
Item
Item
Item

Ordered List:

First item
Second item
Third item
Fourth item

Unordered HTML List

Example

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body>
</html>

Disc

Sets the list item marker to a bullet (default)

Example

<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Circle

Sets the list item marker to a circle

Example

<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul

Square

Sets the list item marker to a square

Example

<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

None

The list items will not be marked

Example

<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Ordered List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:

Example

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Numbers:

The list items will be numbered with numbers (default)

<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Uppercase Letters:

The list items will be numbered with uppercase letters

<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Lowercase Letters:

The list items will be numbered with lowercase letters

<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Uppercase Roman Numbers:

The list items will be numbered with uppercase roman numbers

<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Lowercase Roman Numbers:

The list items will be numbered with lowercase roman numbers

<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Example

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;}

li {
    float: left;}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;}

li a:hover {
    background-color: #111111;}
</style>
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

Tables

desing12:25Html, Html5 tutorial No comments:

HTML Tables

An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

Example

<body>

<table style="width:100%">
<tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
</tr>
<tr>
<td>Jill</td>
    <td>Smith</td>
    <td>50</td>
</tr>
<tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
</tr>
</table>

</body>

HTML Table - Adding a Border

Example

table, th, td {
border: 1px solid black;
}

Example

<!doctype html>
<html>
    <head>
        <title>This is our web design class</title>
        <meta charset="UTF-8">
        <meta name="description"
        content="Free Web tutorials">
        <meta name="keywords"
        content="HTML,CSS,XML,JavaScript">
        <link rel="stylesheet"
        type="text/css" href="style.css">
    </head>
<body>
    <table border="1px"width="100%"bgcolor="pink">
        <tr>
            <td>Name</td>
            <td>Father's Name</td>
            <td>Mobile No</td>
            <td>Image</td>
        </tr>
        <tr>
            <td>Tania</td>
            <td>Abdul Rouf</td>
            <td>123456</td>
            <td><img src="img/3.png"width="400px"height="200px"></td>
        </tr>
    </table>
    <pre>This          is     Paragraph       Tag</pre>
    <pre>This          is     Paragraph       Tag</pre>
    <pre>This          is     Paragraph       Tag</pre>
    <p> This is our paragraph</P><hr/>
    <ol type="A">
        <li> Karim</li>
        <li> Karim</li>
        <li> Karim</li>
        <li> Karim</li>
    </ol>
    <ol type="a">
        <li> Karim</li>
        <li> Karim</li>
        <li> Karim</li>
        <li> Karim</li>
    </ol>
    <ol type="1">
        <li> Karim</li>
        <li> Karim</li>
        <li> Karim</li>
        <li> Karim</li>
    </ol>
    <ol type="i">
        <li> Karim</li>
        <li> Karim</li>
        <li> Karim</li>
        <li> Karim</li>
    </ol>
    <ol type="I">
        <li> Karim</li>
        <li> Karim</li>
        <li> Karim</li>
        <li> Karim</li>
    </ol>
    <ul type="square">
        <li> Karim</li>
        <li> Karim</li>
        <li> Karim</li>
        <li> Karim</li>
    </ul>
    <ul type="circle">
        <li> Karim</li>
        <li> Karim</li>
        <li> Karim</li>
        <li> Karim</li>
    </ul>
    <ul type="disc">
        <li> Karim</li>
        <li> Karim</li>
        <li> Karim</li>
        <li> Karim</li>
    </ul>
</body>
</html>

Images

desing12:15Html, Html5 tutorial 1 comment:

HTML Images

In HTML, images are characterized with the <img> tag.

The <img> tag is vacant, it contains characteristics just, and does not have an end tag.

The src quality indicates the URL (web address) of the image:

Example

Image Size - Width and Height

Example

Alternatively, you can use the width and height attributes:

Example

Width and Height, or Style?

Example

<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%; }
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

</body>
</html>

Images in Another Folder

Example

Animated Images

HTML allows animated GIFs:

Example

Image as a Link

To use an image as a link, put the <img> tag inside the <a> tag:

Example

<a href="default.asp">
<img src

Image Floating

Use the CSS float property to let the image float to the right or to the left of a text:

Example

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>

Image Maps

Example

Background Image

To add a background image on an HTML element, use the CSS property background-image:

Example

To add a background image on a web page, specify the background-image property on the BODY element:

<body style="background-image:url('clouds.jpg')">

<h2>Background Image</h2>

</body>

Example

To add a background image on a paragraph, specify the background-image property on the P element:

HTML Links

desing11:58Html, Html5 tutorial No comments:

HTML Links

HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.

Example

<a href="https://bestdesign17.blogspot.com/">Visit our HTML tutorial</a>

The href attribute specifies the destination address (https://bestdesign17.blogspot.com/) of the link.
The link text is the visible part (Visit our HTML tutorial).

HTML Link Colors

By default, a link will appear like this (in all browsers):

An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red

Example

<!DOCTYPE html>
<html>

<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>

<style>
a:link {
    color: green;
    background-color: transparent;
    text-decoration: none;}

a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;}

a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;}

a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;}
</style>

<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>

</html>

Paragraphs

desing11:00Html, Html5 tutorial No comments:

HTML Paragraphs

The HTML <p> element defines a paragraph:

Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<!DOCTYPE html>
<html>

<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>

<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Freelancign web design and Graphics design

Saturday, 6 May 2023

CSS Icons

How To Add Icons

Font Awesome Icons

xample

Bootstrap Icons

Example

Google Icons

Example

Wright © bestwebdesign and Graphics design

Monday, 13 November 2017

HTML JavaScript

Example

JavaScript can change HTML styles

HTML Iframes

Iframe - Set Height and Width

Example

HTML classes

Example

HTML Lists

Unordered List:

Ordered List:

Unordered HTML List

Example

Disc

Example

Circle

Example

Square

Example

None

Example

Ordered List

Example

Numbers:

Uppercase Letters:

Lowercase Letters:

Uppercase Roman Numbers:

Lowercase Roman Numbers:

Example

HTML Tables

Example

HTML Table - Adding a Border

Example

Example

HTML Images

Example

Image Size - Width and Height

Example

Example

Width and Height, or Style?

Example

Images in Another Folder

Example

Animated Images

Example

Image as a Link

Example

Image Floating

Example

Image Maps

Example

Background Image

Example

Example

HTML Links

Example

HTML Link Colors

Example

<!DOCTYPE html><html><head> <title>My First HTML</title> <meta charset="UTF-8"></head>

<body>

</body>

</html>

HTML Paragraphs

Example

<!DOCTYPE html><html><head> <title>My First HTML</title> <meta charset="UTF-8"></head><body>

</body>

</html>

Pages

<!DOCTYPE html>
<html>

<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>

<!DOCTYPE html>
<html>

<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>

<body>