INTRODUCTION TO HTML & CSS .pptx

INTRODUCTION TO
HTML & CSS
Presented by : Rajeev khatri

OUTLINE
• Introduction
• HTML
• CSS – a brief introduction

What Is HTML ?
• HTML is the language of the web (Hyper Text Markup Language) .
• Every internet browser can interpret and display HTML documents .
• In reality HTML is just a stream of text that is formatted and displayed for you on the
screen by the web browser .
• HTML documents consist of a series of pairs of tags often with text and other tags in
between the tags .
• A tag pair has an opening tag and a closing tag .
• HTML tags are contained within <> (chevrons) .
• An opening tag is like this .
• A closing tag is like this .
• Tags should match (generally) .
• HTML documents can be written in files with the postfix ‘.html’ .

HTML Code
• Visit a web page that you like
• Right click on the page
• Select the ‘View Source’ option
• This is what the web server sends back to the browser
• The browser interprets and displays it

HTML Example Page 1
<! Doctype html>
<html>
<head>
<title>First web page</title>
</head>
<body>
My First web page
</body>
</html>

HTML Tags
• Hyperlink tag;
<a href= “target url”>Link Text</a>
• Headings
• <h1>Big Heading</h1>
• <h2>Smaller Heading</h2>
• <h3>Even Smaller Heading</h3>
• Text
• <p>Paragraph</p>
• <i>Italic</i>
• <u>underline</u>
• <br>newline tag
• <hr>horizontal rule(line) across page

Make the page below in your file using
the html tags we have just seen

HTML Tables
• Tables are a very useful way of visual information
• Tables have rows and columns
• The tags are;
• <table></table> : outer table tags
• <th></th> : table heading row(for the first row of the table only)
• <tr></tr> : for a normal table row
• <td></td> : for a table element

A Very Simple Table
<!DOCTYPE html>
<html>
<head>
<meta charset=”IOS-8859-1”
<TITLE>My first Table</title>
</head>
<body>
<table border=1>
<tr>
<th>Column 1 Head</th>
<th>Column 2 head</th>
</tr>
<tr>
<td>Column 1 Row 1 Data</td>
<td>Column 1 Row 2 Data</td>
</tr>
</table>
</body>
</html>

HTML Forms
• Information can be sent back to the server via web forms .
• Web forms consist of web page components that capture information .

Form Tag
• All components in a form are contained within the tag .
• The opening form tag will usually look something like this;
• <form action=“hospitals.html” method=“POST”
• The action attribute is the address of the web page where information is sent
• The method attribute is the type of request that is sent to the server,
POST is almost always used with forms

Common Form Elements – Inside the
<form></form> tags
TEXT
• Text Input
<input type=“text” name=“username” id=“username” value=“ctomlins” />
• Password Input
<input type=“password” name=“pass” id=“pass” value=“mypassword” />
• Text Area
<textarea id=“textareainput” name =“textareainput” rows=“5” cols=“30” >
Text inside the text area goes between the tags
</textarea>

Login Form
<FORM ACTION=login.html METHOD=POST>
<TR>
<TD>Username</TD>
<TD>
<INPUT NAME="username" ID="username" TYPE="EDIT" SIZE=50 MAXLENGTH=50 VALUE=""></TD>
</TR>
<TR>
<TD>Password</TD>
<TD>
<INPUT NAME="password" ID="password" TYPE="PASSWORD" SIZE=50 MAXLENGTH 50 VALUE="">
</TD>
</TR>
<TR>
<TD>Submit</TD>
<TD>
<INPUT NAME="submit" TYPE="SUBMIT" VALUE="Login">
</TD>
</TR>
</FORM>

Form Elements – Selectors Pull Down List
<SELECT NAME=team_id ID=team_id>
<OPTION VALUE=1>Alvin and the Chipmunks</OPTION>
<OPTION VALUE=2>Fantastic Five</OPTION>
<OPTION VALUE=3>Serious Quiz Leaders</OPTION>
</SELECT>

Form Elements : Checkbox
<input id="molec_conf_1" name="molec_conf_1“ type="CHECKBOX“ value="1“
checked>
<input id="molec_conf_2" name="molec_conf_2" type="CHECKBOX" value="1">

Form Elements : Submit Button
• Pressing the submit button on a web form sends the information in it to the
server .
• The http address that the information is sent to is taken from the ACTION
attribute of the form tag .

Form Elements : Submit Button
<FORM ACTION=login.html METHOD=POST>
<TR>
<TD WIDTH = 25% ALIGN=left VALIGN=top BGCOLOR=#ffffff COLSPAN=1>Username</TD>
<TD WIDTH = 75% ALIGN=left VALIGN=top BGCOLOR=#ffffff COLSPAN=1>
<INPUT NAME="username" ID="username" TYPE="EDIT" SIZE=50 MAXLENGTH=50 VALUE="">
</TD>
</TR>
<TR>
<TD WIDTH=25% ALIGN=left VALIGN=top BGCOLOR=#ffffff COLSPAN=1>Password</TD>
<INPUT NAME="password" ID="password" TYPE="PASSWORD" SIZE=50 MAXLENGTH=50 VALUE="">
</TD>
</TR>
<TR>
<TD WIDTH = 25% ALIGN=left VALIGN=top BGCOLOR=#ffffff COLSPAN=1>Submit</TD>
<INPUT NAME="submit" TYPE="SUBMIT" VALUE="Login">
</TD>
</TR>
</FORM>

HTML Summary
• HTML is a syntax for formatting internet content .
• Page content is placed inside nested html tags that contain formatting
information for the browser .
• Html forms allow a developer to make interactive web content, with
information being sent back to the web server .

HTML Page Structure Document Object
Model (DOM)

What Is CSS ?
• CSS stands for Cascading Style Sheets .
• CSS describes how HTML elements are to be displayed on screen, paper, or in
other media .
• CSS saves a lot of work. It can control the layout of multiple web pages all at
once .
• External stylesheets are stored in CSS files .

Types Of CSS
• CSS commands can be applied to a page in three ways;
• In line as a part of HTML tags
• Inside a page defined inside a tag
• In a separate file that a web page accesses

Inline CSS
• Inside a tag the style property is added and css directives are added inside
quotes
• The format of the css is <property>:<value>
• More than one css property can be separated by a semicolon
• We have already seen an example of this;
<div style="color:#0000FF">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
• Text within the div will be displayed in blue

CSS : Using an included File
• It is a good idea to completely separate the css from the HTML by putting the
css code in a separate file.

web page Header HTML
<HEAD>
<TITLE>Computer Skills for Bioinformatics</TITLE>
<LINK media=all
href="https://dataman.bioinformatics.ic.ac.uk/computer skills/css/style.css"
type=text/css rel-stylesheet>
</HEAD>

CSS : apply a style to an id
In the css file you will have seen many items like this;
#content {MARGIN-LEFT: 180px; WIDTH: 720px; MARGIN-RIGHT: 100px
• This will apply the css to the section of the html with the id content
<div id="content">
elements in here have css style content applied tothem
</div>

css apply a style to more than one
element
• The values of id attributes have to be unique by their natureIf you want to
apply a style to more than one element then you can use the class attribute of a
tag .
• <div class="data-table"> ... </div>
• <table class="data-table"> ... </table>

css : apply style using class
• These correspond to the .data-table directives at the bottom of the css file;
• So whenever data-table is included as a class attribute the css rules are
applied .
• This can be applied to many elements on a page .

Apply a CSS class to your form table
<!doctype>
<html>
<head>
<title>2019 Fourth Quarter Report</title>
<link href="styles.css" rel="stylesheet" media="all" />
</head>
<body>
<table>
</table>
</body>
</html>

Working with multiple devices :
Bootstrap
Demonstration

INTRODUCTION TO HTML & CSS .pptx

More Related Content

Similar to INTRODUCTION TO HTML & CSS .pptx

Recently uploaded

INTRODUCTION TO HTML & CSS .pptx