Learn HTML

What is HTML?
HTML structures?
HTML Tags?
DOCTYPE declaration?

HTML headings? H1, H2
HTML Paragraph? <p>
HTML Links? <a href>
HTML Images? <img src >

HTML Attribute?
1. title : <p title ...>
2. href : <a href ...>
3. size: <img width=... height=..>
4. alt :  specifies an alternative text to be used, when an HTML element cannot be displayed.
Note : always use lowercase and quote your attribute.

Summary :
  • All HTML elements can have attributes
  • The HTML title attribute provides additional "tool-tip" information
  • The HTML href attribute provides address information for links
  • The HTML width and height attributes provide size information for images
  • The HTML alt attribute provides text for screen readers
  • At W3Schools we always use lowercase HTML attribute names
  • At W3Schools we always quote attributes with double quotes
What is the important of HTML Heading? search engine use it to index website structure
What is use of <hr> tag?
What is use of HTML <pre> element?

The HTML style attribute -->> style="property:value"

Chapter Summary

  • Use the style attribute for styling HTML elements
  • Use background-color for background color
  • Use color for text colors
  • Use font-family for text fonts
  • Use font-size for text sizes
  • Use text-align for text alignment
The HTML <b> element defines bold text, without any extra importance. The HTML <strong> element defines strong text, with added semantic "strong" importance.
The HTML <i> element defines italic text, without any extra importance. The HTML <em> element defines emphasized text, with added semantic importance.

Browsers display <strong> as <b>, and <em> as <i>.
However, there is a difference in the meaning of these tags: <b> and <i> defines bold and italic text,
but <strong> and <em> means that the text is "important".

The HTML <small> element defines small text:
The HTML <mark> element defines marked or highlighted text:

TagDescription
<b>Defines bold text
<em>Defines emphasized text 
<i>Defines italic text
<small>Defines smaller text
<strong>Defines important text
<sub>Defines subscripted text
<sup>Defines superscripted text
<ins>Defines inserted text
<del>Defines deleted text
<mark>Defines marked/highlighted text


TagDescription
<abbr>Defines an abbreviation or acronym
<address>Defines contact information for the author/owner of a document
<bdo>Defines the text direction
<blockquote>Defines a section that is quoted from another source
<cite>Defines the title of a work
<q>Defines a short inline quotation

TagDescription
<code>Defines programming code
<kbd>Defines keyboard input 
<samp>Defines computer output
<var>Defines a mathematical variable
<pre>Defines preformatted text

HTML Comment tags?

 HTML Styling.
CSS stands for Cascading Style Sheets
Styling can be added to HTML elements in 3 ways:
  • Inline - using a style attribute in HTML elements
  • Internal - using a <style> element in the HTML <head> section
  • External - using one or more external CSS files
CSS Syntax ->> element { property:value; property:value }
CSS ID :
<p id="p01">I am different</p>
p#p01 {
    color:blue;
}

 Css Class :
<p class="error">I am different</p>
p.error {
    color:red;
}

 Use id to address single elements. Use class to address groups of elements.

Chapter Summary


  • Use the HTML style attribute for inline styling
  • Use the HTML <style> element to define internal CSS
  • Use the HTML <link> element to refer to an external CSS file
  • Use the HTML <head> element to store <style> and <link> elements
  • Use the CSS color property for text colors
  • Use the CSS font-family property for text fonts
  • Use the CSS font-size property for text sizes
  • Use the CSS border property for visible element borders
  • Use the CSS padding property for space inside the border
  • Use the CSS margin property for space outside the border

HTML Links
Color :
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}

Chapter Summary

  • Use the HTML <a> element to define a link
  • Use the HTML href attribute to define the link address
  • Use the HTML target attribute to define where to open the linked document
  • Use the HTML <img> element (inside <a>) to use an image as a link
  • Use the HTML id attribute (id="value") to define bookmarks in a page
  • Use the HTML href attribute (href="#value") to link to the bookmark

Chapter Summary HTML IMAGES

  • Use the HTML <img> element to define an image
  • Use the HTML src attribute to define the URL of the image
  • Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
  • Use the HTML width and height attributes to define the size of the image
  • Use the CSS width and height properties to define the size of the image (alternatively)
  • Use the CSS float property to let the image float
  • Use the HTML <map> element to define an image-map
  • Use the HTML <area> element to define the clickable areas in the image-map
  • Use the HTML <img>'s element usemap attribute to point to an image-map

Chapter Summary : HTML Table

  • Use the HTML <table> element to define a table
  • Use the HTML <tr> element to define a table row
  • Use the HTML <td> element to define a table data
  • Use the HTML <th> element to define a table heading
  • Use the HTML <caption> element to define a table caption
  • Use the CSS border property to define a border
  • Use the CSS border-collapse property to collapse cell borders
  • Use the CSS padding property to add padding to cells
  • Use the CSS text-align property to align cell text
  • Use the CSS border-spacing property to set the spacing between cells
  • Use the colspan attribute to make a cell span many columns
  • Use the rowspan attribute to make a cell span many rows
  • Use the id attribute to uniquely define one table

Chapter Summary HTML List

  • Use the HTML <ul> element to define an unordered list
  • Use the HTML style attribute to define the bullet style
  • Use the HTML <ol> element to define an ordered list
  • Use the HTML type attribute to define the numbering type
  • Use the HTML <li> element to define a list item
  • Use the HTML <dl> element to define a description list
  • Use the HTML <dt> element to define the description term
  • Use the HTML <dd> element to define the description data
  • Lists can be nested inside lists
  • List items can contain other HTML elements
  • Use the CSS property display:inline to display a list horizontally

HTML Blocks

Block-level Elements

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
The <div> element is a block-level element.

Examples of block-level elements:
  • <div>
  • <h1> - <h6>
  • <p>
  • <form>

Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary.
This is an inline <span> element inside a paragraph.
Examples of inline elements:
  • <span>
  • <a>
  • <img>
HTML Class

Comments

Post a Comment

Popular posts from this blog

How to learn data structure effectively

Step 1 : Learn the theory and fundamentals Understand top fundamental topics covered in data structures such as: Algorithms, Arrays, Collections, Complexity Analysis, Graphs, Hashtables, Heaps, Linked Lists, Queues, Recursion, Search, Sort, Stacks, Trees You can checkout these websites to help cover fundamentals: www.geeks4geeks.com  - explains all the high level fundamentals www.beehyve.io/data-structures  — student crowdsourced resources and community for any topic in CS including Data Structures Time complexity resources [BeeHyve]Time Complexity Cheat Sheet https://visualgo.net/en  - has visualizations of a lot of helpful algorithms Here are more schools that have DS classes which you may find helpful: CS 226 Algorithms and Data Structures Brown CS 16 Introduction to Algorithms and Data Structures Stanford CS 166 Data Structures CMU CSE 15-211 Fundamental Data Structures and Algorithms University of Washington at St. Louis CSE 241 Algorithms a...
Read more

How to set Android PATH in Ubuntu 14.04

1. Open Terminal, run : $ sudo gedit ~/.profile 2. Append the following code to your profile PATH = ${PATH}: /home/robi/Android/Sdk /tools PATH = ${PATH}: /home/robi/Android/Sdk /platform-tools Note : Change the RED text with your android installation path. 3. Click save and run another command :  $ sudo gedit ~/.bashrc 4. Add the following code : export ANDROID_HOME= /home/robi/Android/Sdk/ export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platforms-tools 5. Click Save.
Read more