#13 HTML Lists

As we learn in the previous post tables are very important and easy to represent the data in tabular form. Lists are also helping us to represent the data in lists form.

HTML Lists

Generally, The HTML lists are of three types.

(1) Unordered list - defines inside <ul> tag.

The items inside unordered lists are defined inside the <li> tag. By default, the list items in unordered lists are marked with bullets (•). We can the style of the marker using the CSS list-style-type property [Values- disc (default), circle, square, none].

(2) Ordered list - defines inside <ol> tag.

The items inside ordered lists are defined inside the <li> tag. By default, the list items in ordered lists marked with numbers (1,2...so on). We can the style of the marker using the type attribute [Values- "1" (default), "A", "a", "I", "i"].Here we can control the counting of the list using start attributes.

(3) Description list - defines inside <dl> tag.

The items of the description list as defined in the below example. 

• <dt> tag - It defines the term (name) in description list.
• <dd> tag - It defines the each term in description list.

⭐Example of an HTML Table :

📌Find more examples here:- 🔗https://codepen.io/arwazkhan189/pen/bGePMMP

(1) Unordered list example

(2) Ordered list example

(3) Description list example

📌You can find some more  about Lists and examples here 🔗https://html.com/lists/

❗We can style the Lists using CSS. It will be posted later.🙂

❗We can create a nested list.

=======================================================================

📌Here is the Codepen link to the above examples:- 🔗https://codepen.io/arwazkhan189/pen/bGePMMP

Next, we will learn about HTML Block & Inline elements and Class & ID attributes...

Keep Learning and practice, practice, and practice.. !!!

Follow me on Codepen 🔗https://codepen.io/arwazkhan189

LIKE, COMMENT, SHARE, SUBSCRIBE to the Blog!

#12 HTML Tables

 Tables are very important and easy to represent the data in tabular form.

HTML Table

The HTML <table> tag defines an HTML Table. Some basic elements are:-

• <tr> - This tag defines the table row.
• <th> - This tag defines the table header. By default, the text in the <th> tag is bold and centered. 
• <td> - This tag defines the cell/column. By default, the text in the <td> tag is regular and left aligned. 
• <caption> - This element is used to define a table caption.

⭐Example of an HTML Table :

HTML Table - Attributes 

• colspan - This attribute is used to make a cell span many columns.
• rowspan - This attribute is used to make a cell span many rows. 

📌You can find some more Table elements and examples here 🔗https://html.com/tables/

❗We can style the table using CSS. It will be posted later.🙂

=======================================================================

📌Here is the Codepen link to the above examples:- 🔗https://codepen.io/arwazkhan189/pen/ZEOdWqR

Next, we will learn about HTML Lists ...

Keep Learning and practice, practice, and practice.. !!!

Follow me on Codepen 🔗https://codepen.io/arwazkhan189

LIKE, COMMENT, SHARE, SUBSCRIBE to the Blog!

#11 HTML Images

Images in a website play an important role in attracting users.

HTML Images  

The HTML <img> tag is used to embed an image in web page.

syntax:- <img src='path of the image' alt='alternate text for the image'>

HTML Images - src Attribute 

The src attribute specifies the path (URL) to the image. 

HTML Images - alt Attribute 

The alt attribute provides alternate text for an image if the user somehow cannot view the image then the alternate text will be displayed.

⭐Example of an HTML Images :

❗ If the user for some reason cannot view the image then the alternate text will be displayed.

HTML Images - width and Height 

We can specify the width and the height attribute to give a size an image. The width and height attributes define the width and height of the images in pixels.

syntax:- <img src='url' alt='alternate-text' width='200' height='300'>

⭐Example of an HTML image with width and height attributes :

❗ We can style the images using  CSS like background images etc. It will be discussed further.  

=======================================================================

📌Here is the Codepen link to the above examples:- 🔗https://codepen.io/arwazkhan189/pen/vYKwyWO

Next, we will learn about HTML Tables ...

Keep Learning and practice, practice, and practice.. !!!

Follow me on Codepen 🔗https://codepen.io/arwazkhan189

LIKE, COMMENT, SHARE, SUBSCRIBE to the Blog!

#10 HTML Links

A link is simply an address that specifies the location of a resource on the Internet just like an URL which takes you to the web pages identified by the linked URLs. 

Hyperlinks, on the other hand, are links that you can click on or activate with a pointing device in order to jump to the target page.

HTML Links  

The HTML <a> tag defines a hyperlink. The href attribute indicates the link's destination.By default, links will appear as follows in all browsers :

• An unvisited link is underlined and blue.
• A visited link is underlined and purple
• An active link is underlined and red

❗Using CSS we can style the links !!!

⭐Example of a HTML Link:

HTML Links - target Attribute 

By default, the linked page will be displayed in the current browser window. To change this , we must specify another target for the link.

The target attribute specifies where to open the linked document . The target attribute can have one of the followings values :

•  _self - Default , Opens the document in the same tab as it was clicked.

• _blank - Opens the document in a new window or tab.

• _parent - Opens the document in the parent frame .

• _top - Opens the document in the full body of the window.

⭐Example of a HTML Links with the target attributes :

Absolute URL & Relative URL

Absolute URL is a full web address in the href attribute.

Relative URL is a local link i.e. link to a page within same website .

❗Link to a page (or file) located in Absolute URL & Relative URL is same as we organize files in website.. Previous post resolve this problem go checkout the post.. 

Link is here 🔗Click here !

⭐Example of Absolute URL and Relative URL :

❗We cover the basics of HTML Links , but HTML Links can be used as following listed below :-

• An image as a Link
• Link to an Email Address
• Button as a Link

⭐Examples as above listed :

⭐Extras on HTML Links - Link Titles , Bookmarks :

The title attribute specifies extra information about an element. The information is shown when the mouse hover the text .

             

Bookmarks are generally useful for a very long web page. To create bookmark ,first create the bookmark  using id attributes and then add link to it using  href attributes.This will be discussed later with more examples.

Uses of Bookmarks :

• We can easily navigate a very long web page  using bookmark. 
• We can also navigate from one page to another page using bookmark.   

=======================================================================

📌Here is Codepen link of above examples :- 🔗https://codepen.io/arwazkhan189/pen/qBZKOag

Next we will learn about HTML Images  ...

Keep Learning and practice , practice and practice.. !!!

Follow me on Codepen 🔗https://codepen.io/arwazkhan189

LIKE , COMMENT , SHARE , SUBSCRIBE  the Blog!

Quick Tips #4: What structure should your website have ?

website files structure

 The most common Things we'll have on any website project we create an index HTML file and folders to contain images , style , files and script files .

Some common files and folder  :

1. index.html : This fill will generally contain your homepage content , i.e. the text and images that people see when they first go to your site . 
2. images folder : This folder will contains all the images that you us on your site.
3. styles folder : This folder will contains  the CSS code used to style your content.
4. scripts folder :This folder will contains all the JavaScript code used to add interactive functionally to your site .

📌It is good practice to organize your files .😊

📌It helps  when you link your file with HTML.😎

=======================================================================

Keep Learning and practice , practice and practice.. !!!

Follow me on Codepen 🔗https://codepen.io/arwazkhan189

LIKE , COMMENT , SHARE , SUBSCRIBE  the Blog!

Quick Tips #3: How to link external Style Sheet in Codepen ?

Four simple Steps to link external style sheet in Codepen

Step 1 :- Create two separate pen for HTML and CSS file .

Step 2 :- Now Copy the CSS file link.

Step 3 :- Open HTML file click on setting button on the top bar , now click to  CSS option and scroll down and paste the CSS file link .

Step 4:- Click to Save & Close button .   

=======================================================================

Keep Learning and practice , practice and practice.. !!!

Follow me on Codepen 🔗https://codepen.io/arwazkhan189

LIKE , COMMENT , SHARE , SUBSCRIBE  the Blog!

#9.2 Standard CSS used in HTML - Internal and External CSS

❗Here we are discussing Standard CSS used in HTML. The major part of CSS will be discussed later in CSS Blog.

Internal CSS 

An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the <head> section of an HTML page, within a  <style> element.

⭐Example of a sample HTML document with an Internal CSS:

Sample HTML document with internal CSS

Output of above Code

📌Here is Codepen link of above examples :- 🔗https://codepen.io/arwazkhan189/pen/qBZOvpM

External CSS 

An external style sheet is used to define the style for many HTML pages. To use an external style sheet, add a link to it in the <head> section of each HTML page.

External style sheet can be referenced with a full URL or with a path relative to the current web page.

Example:-

• Example uses a full URL to link a style sheet. <link rel="stylesheet"href="https://www.example.com/...../styles.css">

• Example link to a style sheet located in css folder on the current website. <link rel="stylesheet"href="/css/styles.css">

• Example link to a style sheet located in the same folder as the current page. <link rel="stylesheet"href="styles.css">

• Example link to a style sheet located in previous folder on the current page. <link rel="stylesheet"href="../styles.css">

⭐Example of a sample HTML document with an External CSS:

Sample HTML document link with External Style Sheet

Output of above Code

📌Here is Codepen link of above examples:- 

HTML File -> 🔗https://codepen.io/arwazkhan189/pen/YzqygRo

CSS File -> 🔗https://codepen.io/arwazkhan189/pen/dyMYLPx     

❗How to link external Style Sheet in Code pen ?🔗https://wdforbeginner.blogspot.com/2020/08/quick-tips-3-how-to-link-external-style.html

⭐Example of a sample HTML document with an Internal CSS with Colors, different fonts and font-size,Borders, paddings , margins etc...

📌Here is Codepen link of above examples:-🔗 https://codepen.io/arwazkhan189/pen/gOraJOX

=======================================================================

Next we will learn about HTML Links  ...

Keep Learning and practice , practice and practice.. !!!

Follow me on Codepen 🔗https://codepen.io/arwazkhan189

LIKE , COMMENT , SHARE , SUBSCRIBE  the Blog!

#9.1 Standard CSS used in HTML - Inline CSS

 CSS stands for Cascading Style Sheets. CSS describe how HTML elements are to be displayed on screen, paper, or in other media.

With CSS , we can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors to be used, different displays for different devices and screen sizes, and much more!

CSS can be added to HTML documents in 3 ways:

• Inline - by using the style attribute inside HTML elements.
• Internal - by using a <style> element in the <head> section.
• External - by using a <link> element to link an external CSS file.

❗Here we are discussing Standard CSS used in HTML. The major part of CSS will be discussed later in CSS Blog.

Inline CSS 

An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses the style attribute of an HTML element.

Background Color 

We can set the background color for HTML elements like in Text , images , heading, block , section etc..

Example:

• <h1 style="background-color:yellow;">Background Color used in a heading tag</h1>

  

• <p style="background-color:orange;">This is a paragraph with orange background color.</p>

  

• <div>hello ,how are you!!!

          <div style="background-color: rgba(238,93,72,0.8);">

                  This is a div with background color.

          </div>

  </div>

  

Text Color 

We can set the color of text in HTML.

Example:

• <h3 style="color:blue">This is an example of Text Color in heading tag.</h3>
  
• <p style="color:grey">This is an example of Text Color in paragraph tag. </p> 
  
   

Border Color 

We can set the color of borders in HTML.

❗Border values and styles we will learn in CSS Blog with more Examples.

Example:

• <h2 style="border: 2px solid green">Hello Friends</h2>

  
• <h2 style="border: 2px dashed tomato">Hello Friends</h2>

  
• <h2 style="border: 1px dotted orange">Hello Friends</h2>

  

❗Internal CSS and External CSS  are discussed in next blog. 

=======================================================================

📌Here is Codepen link of above examples :- 🔗https://codepen.io/arwazkhan189/pen/BaKovqm?editors=1000

Next we will learn about Internal CSS and External CSS  ...

Keep Learning and practice , practice and practice.. !!!

Follow me on Codepen 🔗https://codepen.io/arwazkhan189

LIKE , COMMENT , SHARE , SUBSCRIBE  the Blog!

#8 HTML Colors

HTML Color are specified with predefined colors name , or with RGB ,HEX ,HSL, RGBA , or HSLA values.

Color Names

In HTML , a color can be specified by using a color name .

eg. 

RGB and RGBA Colors

An RGB color value represent RED , GREEN , and BLUE light Sources.

An RGBA color value is an extension of RGB with an Alpha channel (opacity).

rgb(red,green,blue)

Each parameter (red, green, and blue) defines the intensity of the color with a value between 0 and 255.

📌This means that there are 256 x 256 x 256 = 16777216 possible colors!

eg.

rgba(red,green,blue,alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0(not transparent at all).

eg.

HEX Colors

A hexadecimal color is specified with: #RRGGBB , where the RR(red), GG(green)  and BB(blue) hexadecimal integers specify the components of color.

#rrggbb

where rr(red) , gg(green) and bb (blue) are hexadecimal values 00 and ff . 

eg.

HSL and HSLA Colors

HSL stands for hue , saturation , and lightness.

HSLA color values are an extension of HSL with an Alpha channel (opacity)

hsl(hue, saturation, lightness)

📌Hue is a degree on the color wheel from 0 to 360. 

 0     is  red 

 120 is  green 

 360 is  blue 

📌Saturation is a percentage value, 0% means shade of gray , 50% is 50% gray, 100% is white.

📌Lightness is also percentage value , 0% is black, 50% means 50% light, 100% is white.

eg.

⭐Different percent of Saturation with 0 hue and 50% of lightness.

⭐Different percent of lightness with 0 hue and 100% of saturation.

⭐Shades of gray hsl(0,0%,X)        ❗x is 20% ,30%,40%,50%...

hsla(hue, saturation, lightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).

eg.

-------------------------------------------------------------------------------------------

❗Here is the link of some website of HTML Color Code :- 

🔗https://htmlcolorcodes.com/

🔗https://www.rapidtables.com/web/color/html-color-codes.html

🔗https://www.html.am/html-codes/color/color-code-chart.cfm

❗ It is hard to remember all the color code so whenever you need just google it . 😁

❗ Example of above as How to use color in background , text , border etc. in the Next blog..

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

Next we will learn about Standard CSS used in HTML ...

Keep Learning and practice , practice , practice !!!

Follow me on Codepen 🔗https://codepen.io/arwazkhan189

LIKE , COMMENT , SHARE , SUBSCRIBE ...