If you do not remember the Lists we did before, here's how!
An Unordered HTML List
Coffee
Tea
Milk
An Ordered HTML List
Coffee
Tea
Milk
An unordered list starts with the ul tag. Each list item starts with the li tag.
The CSS list-style-type property is used to define the style of the item marker:
Disc: Sets the list item marker to a bullet(default)
Circle: Sets the list item marker to a circle
Square: Sets the list item marker to a square
None: The lsit items will not be marked
Marker: Disc
Unordered List with Disc Bullets (which is default :/ )
Coffee
tea
Milk
Marker: Circle
Unordered List with Circle Bullets
Coffee
Tea
Milk
Marker: Square
Unordered List with Square Bullets
Coffee
Tea
Milk
Marker: None
Unordered List without Bullets
Coffee
tea
Milk
Ordered HTML List - the Type Attribute
The type attribute of the ol tag, defines the type of the list item marker.
Type="1" The list items will be numberred with numbers(default)
Type="A" The list items will be numberred with uppercase letters
Type="a" The list items will be numberred with lowercase letters
Type="I" The list items will be numberred with uppercase roman numbers
Type="i" The list items will be numberred with lowercase roman numbers
OL Type="1"
Ordered List with Numbers
Coffee
Tea
Milk
OL Type="A"
ordered List with letters
Coffee
Tea
Milk
OL Type="a"
Ordered List with Lowercase Letters
Coffee
Tea
Milk
OL Type="I"
Ordered List with Roman Numbers
Coffee
Tea
Milk
OL Type="i"
Ordered List with Lowercase Roman Numbers
Coffee
Tea
Milk
HTML Description Lists
An HTML Description List is not as commonly used as unordered or ordered lists but serves an important purpose for displaying name-value pairs. This type of list is marked up using three tags: dl, dt, dd
dl (Description List) This tag defines the description list itself and acts as a container for the list items.
dt (Description Term) Represents a term or a name within the list.
dd (Description Details) Provides the description of the term.
Example of a Description List:
HTML
- Hypertext Markup Language
CSS
- Cascading Style Sheets
javaScript
- Scripting language for Web Pages
Nested HTML Lists
Lists can also be nested inside lists(itself)
Coffee
Tea
Black tea
Green tea
Milk
Note: Lists items can contain new list, and other HTML elements, like images, links, etc.
Control List Counting
By default, and ordered list will start counting from 1. If you want to start counting froma specified number, you can use the start attribute.
An inline element does not start on a new line and only takes up as much width as necessary.
Here's an example of an inline span element inside a paragraph.
HelloWorld
The SPAN element is an inline element, and will not start on a new line.
The span element is often used as a container for some text.
The span element has no required attributes, but style, class and id are common.
There are diferrent types of Inline Elements in HTML:
a, abbr, acronym b, bdo, big,br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, output, q, samp, script, select, small, span, strong, sub, sup, textarea, time, tt, var
The DIV Element
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its foundation by the Romans, who named it Londinium.
My Important Heading
HTML Iframes
An HTML iframe is defined with the iframe tag.
Iframe - Set Height and Width
Use the height and width attributes to specify the size of the iframe.
The attribute values are specified in pixels by default, but they can also be in percent (like "80%").
Or you can use CSS to set the height and width of the iframe.
Iframe - Remove the Border
By default, an iframe has a border around it.
To remove the default border, add the style attribute and use the CSS border property.
With CSS, you can also change the size, style and color of the iframe's border.
HTML File Paths
A file path describes the location of a file in a web site's folder structure.
File paths are used when linking to external files like:
Web pages
Images
Style sheets
JavaScripts
An Absolute file path is the full URL to an internet file
Using a full URL File Path
Relative File Paths
A relative file path points to a file relative to the current page.
In this example, you will create a file and point it towards the 'img src' so that it can display an image on the web:
Or you can see how I used this image src, again :)
In this example, the file path points to a file in the images folder located in the same folder, but you can use it even when your actual image is located in the folder one level above the current folder.
It is best practice to use Relative paths (if possible)
When using relative file paths, your web pages will not be bound to oyur current base URL. All links will work on your computer(localhost) as well as on your current public domain and your future public domains.
Yo BROO
A paragraph
HTML base Element
The base element specifies the base URL and base target for all relative URL's in a page.
Since we have specified a base URL, the browser will look for the image "guitabs.jpg" at "https://debojyoti.neocities.org/resources/images/guitabs.jpg"
In this example, the file path points to a file in the images folder located in the same folder, but you can use it even when your actual image is located in the folder one level above the current folder.
