Showing posts with label HTML&CSS. Show all posts
Showing posts with label HTML&CSS. Show all posts

Saturday 14 April 2018

Id Selector / Use a Header and Footer

                No comments   


  • Id selector is a single element specified.
  • Here, we are see a div command.
Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
# p1{color:red;}
#header{
border:1px solid;
}
</style>
</head>
<body>
<div id=”header”>
This is a header
</div>
<p id=”p1″>this is paragraph</div>
</body>
</html>

How to Link Style in CSS?

                No comments   


  • Here, we are see a all Link decoration.
Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
a{color:blue;text-transform:uppercase;}
a:visited{color:green;}
a:active{color:white;background-color:black;}
</style>
</head>
<body>
<a href=”#”>This is link 1.</a>
</body>
</html>

Text Decoration / Align / Text indent

                No comments   


  • Here, we are decorate a plain text.
Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
a{
color:red;   //Set Color
text-align:left;     //Set Align
text-decoration:uppercase/lowercase/blink;   //Set text decoration
text-transform:uppercase/lowercase/capitalize;   //Set text transform
text-indent:100px;       //Set text indent
}
</style>
</head>
<body>
<a href=”#”>This is My first Paragraph </a>
</body>
</html>

Background image

                No comments   


  • Set background image.
Example:-
<html>
<head>
<title>CastorClass.com</title>
<style type=”text/css”>
body{background-image:url (‘image/image.jpg’);    ///This is set a image link.
background-repeat:no repeat; //This is use a not repeat image.
background-position:top center;  OR background-position:top right;   //This is set a image position
}
</style>
</head>
<html>

Use background color

                No comments   


  • This is use for background color.

Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
body{background-color:red;}
h1{bacground-color:red;
color:white;
}
p<background-color:yello;color:pink;}
</style>
</head>
<body>
<h1>hello everyone</h1>
<p>This is very good</p>
</body>
</html>

How to use CSS in HTML?

                No comments   



we are already study in starting CSS.In this slide we will use a CSS is coding is another file.Because we are write same file that is very complicated.

Example:-
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
h1{color:red; bacground:red;}        //This is write a another File.
</style>
</head>
<body>
<h1>hello everyone</h1>
</body>
</html>

Introduction of CSS

                No comments   

CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the look and formatting of a document written in markup language. It provides an additional feature to HTML. It is generally used with HTML to change the style of web pages and user interfaces. 

It can also be used with any kind of XML documents including plain XML, SVG and XUL.

CSS is used along with HTML and JavaScript in most websites to create user interfaces for web applications and user interfaces for many mobile applications.

Syntax:-
<style type=”text/css”>
h1{color:red;}
</style>
Example:-
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
h1{color:red;}
</style>
</head>
<body>
<h1>hello everyone</h1>
</body>
</html>

Use a Text box / Button / Radio box / Check box.

                No comments   


  • In text box we are use a only plain text.
  • We know everyone how to use a button.
  • Radio button is use for choose a one option.
  • Check box is use for select multiple option.
Syntax:-
<form>
<input type=”text”/>
<input type=”button” “value=show”/>
<input type=”radio” name=”gender”/>Male<input type=”radio” name=”gender”/>Female
<input type=”Check box”/>English<input type=”Check box”/>hindi
</form>

Example:-
<html>
<head>
<title>Welcome</title
</head>
<body>
<form>
<input type=”text”/>
<input type=”button” “value=show”/>
<input type=”radio” name=”gender”/>Male<input type=”radio” name=”gender”/>Female
<input type=”Check box”/>English<input type=”Check box”/>hindi
</form>
</body>
</html>

List

                No comments   

Type of List

  • Unorder list
  • order list
  • Definition list
Syntax:-
<form>
  • <ul type=”circle”>    //Unorder list
  • <li>item1</li>
  • <li>item2</li>
  • <li>item3</li>
  • </ul>
  1. <ol type=”i”>      //order list
  2. <li>item1</li>
  3. <li>item2</li>
  4. <li>item3</li>
  5. </ol>
<dl>                                             ///Definition list
<df>CastorClasses</df>
<dd>MatLab</dd>
<dd>Java</dd>
</dl>
</form>
Example:-
<html>
<head>
<title>Welcome everyone </title>
</head>
<body>
<form>
<ul type=”circle”>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<ol type=”i”>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
<dl>
<df>CastorClasses</df>
<dd>MatLab</dd>
<dd>Java</dd>
</dl>
</form>
</body>
</html>

How to take YouTube video in HTML?

                No comments   


Example:-
<html>
<head>
<title>Irawen</title>
</head>
<body>
<iframe go to youtube site and click a share button then use embedded key and copy all link>
OR
<embed height=”160″ width=”220″ src=”Link copy” type=”application/X=shockwave=flasn”>
</embe>
</body>
</html>

Cell Padding / Cell Spacing

                No comments   


  • Cellpadding is the amount of space between the outer edges of the table cell and the content of the cell.
  •  Cellspacing is the amount of space in between the individual table cells.
Syntax:-
<table cellpadding=”10″>   //This is for cell padding.
<table cellspacing=”10″>    // This is cell spacing.

Example:-
<html>
<head>
<title>Welcome CastorClasses </title>
</head>
<body>
<table>
<tr>
<td>name</td>
<td>age </td>
<td>gender </td>
</tr>
<tr>
<td>ABC</td>
<td>26</td>
<td>Male </td>
</tr>
<tr>
<td>DEF</td>
<td>24</td>
<td>Female </td>
</tr>
<table cellpadding=”10″>
<table cellspacing=”10″>
</table>
</body>
<html>

Table Heading / Col span / row span

                No comments   


  • In table heading we give a heading of table.
  • In col span we give a heading of column.
  • In row span we are give a heading of rows.

Syntax:-
<th>speed </th>     //This is a table heading.
<th colspan=”2″> My bike speed </th>   //This is for col span.
<td rowspan=”3″>10% discount for all Indian </td>   //This is for row span.
Example:-
<html>
<head>
<title>CastorClasses.com </title>
</head>
<body>
<tr>
<th> Sr.no. </th>
<th> speed </th>
<th> age </th>
</tr>
<table border="1″>
<tr>
<th col span="2″>my internet plans </th>
<td rowspan="3″> 10% for discount </td>
</body>
</html>

Create Table

                No comments   


  • Everyone know that for create a table that is use a rows and columns.
Syntax:-
<table>
<border=”4″>
<tr>     For use a rows
<td>Sr. no. </td>
<td> Age </td>
<td> name </td>
</tr>
</table>
Example:-
<html>
<head>
<title>CastorClasses.com</title>
<body>
<table>
<border=”4″>
<tr>
<td>Sr. no. </td>
<td> Age </td>
<td> name </td>
</tr>
<tr>
<td> 1. </td>
<td> 22 </td>
<td>ABC </td>
</tr>
</table>
</body>
</html>

Friday 13 April 2018

Use for Line Breakers.

                No comments   


—>This is use for Line break.

Syntax:-
There are two methods –
a) <p>this is line1 <br> this is line2 <br> this is line3 </p>

“&nbsp”——> This is a use for Space.

b)<pre>
this is line1.
this is line2.
this is line3.
</pre>
Example:-
<html>
<head>
<title>CastorClasses.com</title>
<body>
<pre>
this is line1.
this is line2.
this is line3.
</pre>
</body>
<html>

Use for Font, Bold, Italic (Sentence or paragraph)

                No comments   


Hello Friends,
I am Castorclasses.com. I provide a online classes for all subject.

Syntax:-
<b> This is use for BOLD </b>
<i>This is use for ITALIC </i>
<u>This is use for UNDERLINE </u>


Example:-
<html>
<head>
<title>CastorClasses.com</title>
</head>
<body>
<p>Hiii…. I am a CastorClasses</p>
<b>CastorClasses </b>
<i>am</i>
<u>Hiii…. </u>
</body>
</html>

Use for connection a link

                No comments   

Syntax:-
<a href=”put here link”> Click here</a>
<a href=”link.com”</a>


Example:-
<html>
<head>
<title>CastorClasses.com</title>
<body>
<h1>first page</h1>
<a href=”put here link”> Click here</a>
<a href=”link.com”>
<img src=”image.jpg” width=”50″ height=”130″/>
</a>
</body>
<html>


How to put image in website

                No comments   


  • If put a images in website that is show very attractive.
Syntax:-
<img src=”image/abc.jpg” height=”100″ width=”150″ alt=”Castorclass is image”/>
  In this syntax we include image of height,width and alt.

Example:-
<html>
<head>
<title> CastorClass </title>
</head>
<body>
<h1>Insert an image in html </h1>
<img src=”image/abc.jpg” height=”100″ width=”150″ alt=”Castorclass is image”/>
</body>
</html>

Sunday 8 April 2018

Use for Heading and Paragraph

                No comments   

This is used for give a heading and paragraph of Website design.

Syntax:-
<h> This is Heading 1  </h>    This is a heading tag.
<p> This is a Paragraph1 </p>  This is a Paragraph tag.

Example:-
<html>

<head>

<title>Irawen </title>

</head>

<body>

<h1>Heading1</h1>

<h2>Heading2</h2>

<h3>Heading3</h3>

<h4>Heading4</h4>

<p>This is a first Paragraph</p>

<p>This is a second Paragraph</p>

<p>This is a third Paragraph</p>

<p>This is a fourth Paragraph</p>

</body>

</html>

Output:-
 

Introduction of HTML

                No comments   

What is HTML? 
    HTML stands for Hypertext  Markup Language , Which is used to design HTML Web pages or Templates.

Why it is called Markup Language? 
    Because it is set of markup  tags .These tags are surrounded by angle brackets.

Requirements to design HTML page?
   Browser + Text editor

How to use a HTML?

  • HTML program is always save as Filename.html
  • It is written as a notepad and notepad++.
Example:-
  <html>      //This is open tag.
  <head>
  <tittle> Welcome </tittle>     //This is write a Tittle of Website.
  </head>
  </html>  This is a closed tag.

—>This is a simple code of html.

Popular Posts

Categories

AI (27) Android (24) AngularJS (1) Assembly Language (2) aws (17) Azure (7) BI (10) book (4) Books (115) C (77) C# (12) C++ (82) Course (62) Coursera (178) coursewra (1) Cybersecurity (22) data management (11) Data Science (91) Data Strucures (6) Deep Learning (9) Django (6) Downloads (3) edx (2) Engineering (14) Excel (13) Factorial (1) Finance (5) flutter (1) FPL (17) Google (19) Hadoop (3) HTML&CSS (46) IBM (25) IoT (1) IS (25) Java (92) Leet Code (4) Machine Learning (44) Meta (18) MICHIGAN (5) microsoft (3) Pandas (3) PHP (20) Projects (29) Python (746) Python Coding Challenge (201) Questions (2) R (70) React (6) Scripting (1) security (3) Selenium Webdriver (2) Software (17) SQL (40) UX Research (1) web application (8)

Followers

Person climbing a staircase. Learn Data Science from Scratch: online program with 21 courses

Translate

Data Processing Using Python (Free Course)

Data Processing Using Python (Free Course)
Data Processing Using Python

Popular Posts

LAND YOUR FIRST JOB IN TECH

LAND YOUR FIRST JOB IN TECH
Earn a tech salary without coding Land a job or get your money back* Mentorship, Internship and 1:1 Career Coaching

Deep Learning

Free Python Books

Person climbing a staircase. Learn Data Science from Scratch: online program with 21 courses

365 Days Python Coding Challenge

365 Days Python Coding Challenge

Registration Form for Classes

Name

Email *

Name *

Message *

Cybersecurity for Everyone (Free Course)

Cybersecurity for Everyone (Free Course)
Cybersecurity for Everyone (Free Course)

Top 10 Python Data Science book

Free Courses

Blog Archive

Popular Posts

Join Us

Free Web Development using Python

Join Us