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 and Data Struct
Read more

How to resolve some issue while Installing Moodle Ubuntu 16.04 using Xampp

How to resolve moodle fresh installation issue :  mysql_full_unicode_support#File_format and mysql_full_unicode_support#Large_prefix 1. Go to /opt/lampp/etc then edit my.cnf to add below code [client] default-character-set = utf8mb4 [mysqld] innodb_file_format = Barracuda innodb_file_per_table = 1 innodb_large_prefix character-set-server = utf8mb4 collation-server = utf8mb4_unicode_ci skip-character-set-client-handshake [mysql] default-character-set = utf8mb4    2. Restart Xampp      
Read more

How to change phpmyadmin URL in Xampp Ubuntu and how to solve 'New Security Concept while accessing Phpmyadmin - Xampp' ?

Image
How to change Xampp phpmyadmin URL ini Ubuntu 1. Open file  httpd-xampp.conf   which is located in directory  /opt/lampp/etc/extra/ with your text editor or type in your terminal: sudo nano /opt/lampp/etc/extra/httpd-xampp.conf 2. Change line Alias with your desired path. In below sample, I change my phpadmin url to: localhost/myanothersql How to solve 'New Security Concept' while accessing Phpmyadmin - Xampp ubuntu: Type in your terminal : sudo nano /opt/lampp/etc/extra/httpd-xampp.conf edit line : Require local to Require all granted
Read more