Friday, July 3, 2020

Intro to CSS

CSS


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

Why Use CSS?

CSS is used to define styles for your web pages, including the

CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

This is a heading

This is a paragraph.

When tags like , and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

CSS removed the style formatting from the HTML page!

If you don't know what HTML is, we suggest that you read our HTML Tutorial.


CSS Saves a Lot of Work!

The style definitions are normally saved in external .css files.

With an external stylesheet file, you can change the look of an entire website by changing just one file!

design, layout and variations in display for different devices and screen sizes.



Html Forms


HTML Forms


An HTML form is used to collect user input. The user input can then be sent to a server for processing.

The <form> Element

The HTML <form> element defines a form that is used to collect user input:

<form>
.
form elements
.
</form>

An HTML form contains form elements.

Form elements are different types of input elements, like: text fields, checkboxes, radio buttons, submit buttons, and more.

The <input> Element

The <input> element is the most important form element.

The <input> element is displayed in several ways, depending on the type attribute.

Here are some examples:

Type Description
<input type="text"> Defines a single-line text input field
<input type="radio"> Defines a radio button (for selecting one of many choices)
<input type="submit">Defines a submit button (for submitting the form)

Text Fields

<input type="text"> defines a single-line input field for text input.

Example

A form with two text input fields:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>



HTML Input Types

Here are the different input types you can use in HTML:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">
  • <input type="time">
  • <input type="url">
  • <input type="week">

HTML Form Elements

Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input controls
<output>Defines the result of a calculation

Thursday, July 2, 2020

Image Map In HTML

Image Map


Image Maps


The HTML <map> tag defines an image map. An image map is an image with clickable areas. The areas are defined with one or more <area> tags.


How Does it Work?

The idea behind an image map is that you should be able to perform different actions depending on where in the image you click.

To create an image map you need an image, and some HTML code that describes the clickable areas.

How to Create Image Map!


HTML Image Tags

Tag Description
<img> Defines an image
<map> Defines an image map
<area> Defines a clickable area inside an image map
<picture>Defines a container for multiple image resources


Html Tags


HTML Tags




HTML tags are the hidden keywords within a web page that define how your web browser must format and display the content. Most tags must have two parts, an opening and a closing part. ... Note that the closing tag has the same text as the opening tag, but has an additional forward-slash ( / ) character.

Basic HTML


Tag Description
<!DOCTYPE>  Defines the document type
<html> Defines an HTML document
<head> Contains metadata/information for the document
<title> Defines a title for the document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a thematic change in the content
<!--...-->Defines a comment

Latest post

JSON

  What is JSON? JSON stands for  J ava S cript  O bject  N otation JSON is a lightweight data-interchange format JSON is "self-describi...