tags and different alignment options. 2) The six levels of headings (
) and line breaks (
)."> tags and different alignment options. 2) The six levels of headings (-
) and how they break up sections. 3) Types of lists including numbered (
), bulleted (
), and definition (
) lists and how to structure them. 4) Other text blocks like preformatted (
) and line breaks (
).">0 ratings0% found this document useful (0 votes)50 views16 pagesLecture 4
This document discusses various text elements in HTML including paragraphs, headings, lists, and more. It covers: 1) How to define paragraphs using <p> tags and different alignment options. 2) The six levels of headings (<h1>-<h6>) and how they break up sections. 3) Types of lists including numbered (<ol>), bulleted (<ul>), and definition (<dl>) lists and how to structure them. 4) Other text blocks like preformatted (<pre>) and line breaks (<br>).Uploaded by
Akbar MohammadiCopyright© © All Rights ReservedWe take content rights seriously. If you suspect this is your content, claim it here.Available FormatsDownload as PPTX, PDF, TXT or read online on Scribd 0 ratings0% found this document useful (0 votes)50 views16 pagesLecture 4
This document discusses various text elements in HTML including paragraphs, headings, lists, and more. It covers: 1) How to define paragraphs using <p> tags and different alignment options. 2) The six levels of headings (<h1>-<h6>) and how they break up sections. 3) Types of lists including numbered (<ol>), bulleted (<ul>), and definition (<dl>) lists and how to structure them. 4) Other text blocks like preformatted (<pre>) and line breaks (<br>).Uploaded by
Akbar MohammadiCopyright© © All Rights ReservedWe take content rights seriously. If you suspect this is your content, claim it here.Available FormatsDownload as PPTX, PDF, TXT or read online on Scribd You are on page 1/ 16Ministry of Higher Education
Bamyan University
Computer Science DepartmentFundamentals of Web designing
Working with Text and Lists in HTMLPresented by : Rashid Khademi
Email : rashidkhademi1394@gmail.com
1
learning objective
In this chapter you will learn
How to work with text in HTML
Define paragraphs and headings
Define different types of lists2
Introduction
HTML recognizes several kinds of text blocks that you can use in your document,
including (but not limited to):
Paragraphs
Headings
Block quotes
Lists
Tables
Forms3
Paragraphs
Paragraphs are used more often in Web pages than any other kind of text block.
To create a paragraph, follow these steps:
1. Add <p> in the body of the document.
2. Type the content of the paragraph.
3. Add </p> to close that paragraph<p>
// content goes here</p>
4
Cont.
By default, the paragraph aligns to the left.<p align=”center”>This paragraph is centered.</p>
<p align=”right”>This paragraph is right-justified.</p>
<p align=”justify”>This paragraph is double-justified.</p>5
Headings
Headings break a document into sections
HTML includes six elements to help you define six different heading levels in your
documents:
<h1> is the most prominent heading (Heading 1)
<h6> is the least prominent heading (Heading 6)<h1> First-level heading</h1>
<h2> Second-level heading</h2>
<h3> Third-level heading</h3>
<h4> Fourth-level heading</h4>
<h5> Fifth-level heading</h5>
<h6> Sixth-level heading</h6>6
Preformatted text
A browser won’t dis-play a block element’s
Hard returns
Line breaks
Large white spaces
The preformatted text element (<pre>) instructs browsers to keep all white space intact
Used mostly when you write
Code samples<pre>
This block contains white spaces
</pre>7
Line breaks
By default, browsers usually wrap text that appears in block elements
If a text line reaches the end of a browser window, the next word automatically starts a
new line.
You can manually control the end of a text line with a line break(denoted by the <br />)<p>
This is line one <br/>
This is line two <br/>
This is line three <br/>
</p>8
Horizontal rules
The horizontal rule element (<hr />) helps you include solid straight lines (rules)on your
page.
A horizontal rule must always sit on a line by itself; you can’t add the <hr /> element in
the middle of a paragraph (or other block element).
It may have the (width, size, align, shade) attributes.
<p>
This is paragraph one
</p>
<hr/>
<p>
This is paragraph two
</p>
9
Organizing Information
Lists are powerful tools for arranging similar elements together
They give visitors to your site an easy way to understand gourp of information
Lists use a combination of elements — at least two components:
A markup element that says “Hey browser! The following items are a list.”
Markup elements that say “Hey browser! This is an item in the list.”
HTML provides for three different kinds of lists:
Numbered lists
Bulleted lists
Definition lists10
Numbered lists
You use two kinds of elements for a numbered list:
The ordered list element (<ol>) specifies that this is a numbered list.
List item elements (<li>) mark each item in the list.
Two attributes control the appearance of ordered lists
Start :Specifies the first number in the list.
The default starting number is 1.
Type : Specifies the numbering style from the list. You can choose from five predefined
numbering styles:
1: Decimal numbers.
a: Lowercase letters.
A: Uppercase letters.
i: Lowercase Roman numerals.
I: Uppercase Roman numerals.11
Bulleted lists
A bulleted list consists of one or more items each prefaced by a bullet (often a big dot)
A bulleted list requires the following:
The unordered list element (<ul>) specifies that you’re creating a bulleted list.
A list item element (<li>) marks each item in the list
Type attribute specifies the style of bullet list
disc: Solid circle bullets (the default)
square: Solid square bullets
circle: Hollow circle bullets12
Definition lists
Definition lists group terms and definitions into a single list and require three different
elements to complete the list:
<dl>: Holds the list definitions.
<dt>: Defines a term in the list.
<dd>: Defines a definition for a term<h1>Markup Language Definitions</h1>
<dl>
<dt>SGML</dt>
<dd>The Standard Generalized Markup Language</dd><dt>HTML</dt>
<dd>The Hypertext Markup Language</dd>
</dl>
13
Nesting lists
You can create subcategories by nesting lists within other lists
You can create subcategories by nesting lists within other lists
As you build nested lists, watch your opening and closing tags carefully.14
15
References
• “HTML 4 dummies 5th edition” by Ed Tittel & Mary Burmeister
• “HTML 5 designing rich internet applications” by Mathew Dawid
• “HTML in ten simple steps” by Robert G. fuller16
You might also like
Week 11 - Introducing HTML5 Basic Tags and Special TagsNo ratings yetWeek 11 - Introducing HTML5 Basic Tags and Special Tags26 pages DCA1109 & INTRODUCTION TO WEB PROGRAMMING-Bhushan 266No ratings yetDCA1109 & INTRODUCTION TO WEB PROGRAMMING-Bhushan 26619 pages Chapter Three: Marking Uptext Block Level Elements100% (1)Chapter Three: Marking Uptext Block Level Elements20 pages WEB Development: Topic: An Intoduction To HTMLNo ratings yetWEB Development: Topic: An Intoduction To HTML16 pages 9th Class Computer CH 5 Designing WesbiteNo ratings yet9th Class Computer CH 5 Designing Wesbite19 pages CSE 101 - Introduction To Computers I: TopicNo ratings yetCSE 101 - Introduction To Computers I: Topic39 pages Language of Web Page - HTML (Hypertext Markup Language) The Language of The WebNo ratings yetLanguage of Web Page - HTML (Hypertext Markup Language) The Language of The Web77 pages Computer Applications Practical BBA (G)No ratings yetComputer Applications Practical BBA (G)38 pages Shivajirao Kadam Institute of Technology and Management (Atc), IndoreNo ratings yetShivajirao Kadam Institute of Technology and Management (Atc), Indore16 pages AEC - 12 - Q1 - 0304 - SG - The Impact of Increase of Prices of Basic Commodities To Housing Shortage, Rent and Housing Price StructureNo ratings yetAEC - 12 - Q1 - 0304 - SG - The Impact of Increase of Prices of Basic Commodities To Housing Shortage, Rent and Housing Price Structure16 pages Markup Languages Consist of Sets of Directions That Tell The Browser Software (And OtherNo ratings yetMarkup Languages Consist of Sets of Directions That Tell The Browser Software (And Other6 pages Brief Introduction HTML5: John - Woodward@cs - Stir.ac - UkNo ratings yetBrief Introduction HTML5: John - Woodward@cs - Stir.ac - Uk25 pages 356 Topic 2 Foundations of Intertemporal ChoiceNo ratings yet356 Topic 2 Foundations of Intertemporal Choice13 pages Preparation of A National Environmentally Sound Management Plan For Pcbs and Pcb-Contaminated EquipmentNo ratings yetPreparation of A National Environmentally Sound Management Plan For Pcbs and Pcb-Contaminated Equipment103 pages Quantel Optimis II Service Manual 31 40No ratings yetQuantel Optimis II Service Manual 31 4010 pages Discharging of Spent Cylindrical Lithium-Ion Batteries in Sodium Hydroxide and Sodium Chloride For A Safe Recycling Process (Amalia Et Al 2023)No ratings yetDischarging of Spent Cylindrical Lithium-Ion Batteries in Sodium Hydroxide and Sodium Chloride For A Safe Recycling Process (Amalia Et Al 2023)12 pages Adaptation Strategies and Land Productivity of Banana FarmersNo ratings yetAdaptation Strategies and Land Productivity of Banana Farmers13 pages Call Letter For Online Examination For Recruitment of Officer Grade A' (Phase-I)No ratings yetCall Letter For Online Examination For Recruitment of Officer Grade A' (Phase-I)4 pages Cloud Federation - Slas: Christian Temporale, Hewlett PackardNo ratings yetCloud Federation - Slas: Christian Temporale, Hewlett Packard79 pages Coal and Petroleum. Questions and Answers PDFNo ratings yetCoal and Petroleum. Questions and Answers PDF3 pages BF6M1015C (D2OC314) - 50 HZ: DEUTZ Engine DocumentationNo ratings yetBF6M1015C (D2OC314) - 50 HZ: DEUTZ Engine Documentation4 pages Smith Et Al., 2018 (Analytical Chemistry)No ratings yetSmith Et Al., 2018 (Analytical Chemistry)7 pages Body Scrub Diampu Oleh Dosen: Nia Kusstianti, S.PD., M.PD Dr. Nieke Andina, SP - KK., M.bio - MedNo ratings yetBody Scrub Diampu Oleh Dosen: Nia Kusstianti, S.PD., M.PD Dr. Nieke Andina, SP - KK., M.bio - Med8 pages Sensor CO2 para El 20% KCD - HP - en - 110602 PDFNo ratings yetSensor CO2 para El 20% KCD - HP - en - 110602 PDF5 pages Ed Ebreo - High Performance Team Leadership WorkshopNo ratings yetEd Ebreo - High Performance Team Leadership Workshop5 pages