Scribd
Upload
2 views19 pages

ch-2 html5 Notes PDF

The document provides an overview of creating lists, tables, links, and images in HTML. It explains three types of lists (ordered, unordered, and description), table properties, and how to insert links and images, including making images clickable. Additionally, it discusses the use of iframes to embed pages within a webpage.

Uploaded by

MANJOT SINGH 0009
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
2 views19 pages

ch-2 html5 Notes PDF

The document provides an overview of creating lists, tables, links, and images in HTML. It explains three types of lists (ordered, unordered, and description), table properties, and how to insert links and images, including making images clickable. Additionally, it discusses the use of iframes to embed pages within a webpage.

Uploaded by

MANJOT SINGH 0009
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 19
Creating Lists in HTML When we want to show information in points (like steps, items, etc.), we use lists. There are three types: © Ordered List (
    ) * Unordered List (
      ) * Description List (
      ) Ordered List () An ordered list shows items with numbers (1, 2, 3...). Example: Html ©) Copy code
      1. Wake up
      2. Brush teeth
      3. Go to school
      Output:
    • Go to school
Output: 1. Wake up 2. Brush teeth 3. Go to school Unordered List () An unordered list shows items with bullets (e). Example: Html ©) Copy code
  • Milk
  • Bread
  • Butter
Output: e Milk e Bread e Butter List Properties CSS helps us style our lists: © Type of bullets or numbers * Use images as bullets © Where to place the bullets List-Style-Type with Syntax Changes the bullet/number style. Example: Html () Copy code
  • Apples
    • <1i>Bananas
Here, bullets will be small squares instead of dots. Other types: circle, disc, decimal, lower -alpha, etc. List-Style-Image with Syntax Use an image instead of normal bullets! Example: Html ©) Copy code
  • Goal 1
  • Goal 2
Here, each bullet will be a small star image. List-Style-Position with Syntax Where do we want the bullet? Inside or outside the text box? Example: Html © Copy code
    eis cica® Bainter. Where do we want the bullet? Inside or outside the text box? Example: Html () Copy code
    • First Point
      • <1i>Second Point
    * Inside: Bullet comes inside the text block. * Outside: Bullet is outside and text starts after it. List-Style Syntax We can write all list styles together: Example: Html () Copy code
    • HTML
    • css
    We can write all list styles together: Example: Html () Copy code
      <1i>HTML
    • CSS
    This uses a square bullet placed inside the text area. Nested Lists A list inside another list. Example: Html () Copy code
    • Fruits
        <1i>Apple
      • Mango
    • Vegetables
  • Fruits
    • Apple
    • Mango
  • Vegetables
* Fruits has a sub-list for Apple and Mango. Description List () Use when you want to explain terms, like a mini dictionary. Example: Html ©) Copy code
HTML
HyperText Markup Language
CSS
Cascading Style Sheets
*
is the Term *
is its Definition Creating Tables in HTML Tables organize data into rows and columns. Example: Html () Copy code
Name Age
Alice 12
This makes a table with headers Name and Age. Table Properties Some important properties: * border: Gives a boundary line. * cellpadding: Space inside a cell. * cellspacing: Space between cells. — SELLpaGUlns. VPaVe HiSiue 2 Vel. * cellspacing: Space between cells. © width and height: Table size. * align: How content is aligned. Border Collapse If you don’t want double borders between cells: Example: Css ©) Copy code table { border-collapse: collapse; t This merges borders into a single line. Horizontal and Vertical Alignment Center text horizontally: Htmi (©) Copy code EEA OLE Me Nren ee: Example: Css () Copy code table { border-collapse: collapse; } This merges borders into a single line. Horizontal and Vertical Alignment Center text horizontally: Html ©) Copy code Hello Center text vertically: Html ©) Copy code World Hover on Table Rows or Cells Make table rows change color when you move the mouse over them. Example: Css ©) Copy code tr:hover { background-color: lightblue; } Table Layout Control the table width distribution. Example: Css ©) Copy code table { table-layout: fixed; by ¢ Fixed: Column widths stay fixed even if content is big. e Auto: Column size chanaes based on if content is big. * Auto: Column size changes based on content. Caption Size Change table caption size using CSS. Example: Html ©) Copy code Student Report Height and Width Set specific height and width for table and cells. Example: Html ©) Copy code Example: Html ©) Copy code
Or with CSS: Css ©) Copy code td { width: 150px; height: SOpx; a: Padding Give breathing space inside the cells. Example: Css ©) Copy code td { padding: 10px; if Linking in HTML Links connect one webpage to another or move inside a page. External Linking Linking to another website. Example: Html © Copy code Go to Google Internal Linking Linking to another page of the same website. Example: Html © Copy code Example: Html ©) Copy code Contact Us Anchor Tag The main tag to create links. Example: Html ©) Copy code Visit OpenAI Href Attribute of Tag The href tells the browser where the link goes. Without href, is meaningless. Inserting Image Insert an image with . Example: Html C) Copy code Cute Dog * src: Image location © alt: Text if image doesn’t load Images as Links Make an image clickable like a button. Example: Html ©) Copy code Clicking the image will open YouTube. Frames in HTML File Frames divide the page into sections, showing multiple pages at once. © Old method: (now outdated) * New method: