Download HTML Lists, Tables, Forms, and Semantic Elements: A Comprehensive Guide and more Summaries Software Engineering in PDF only on Docsity!
Create HTML Lists
Ordered List โ The first is an : This is an ordered list of contents. For example:
- An item
- Another item
- Another goes here.
โ Inside the **** tag we list each item on the list inside tags.
Fruits Bananas Apples Paw Paws
List of Countries
Algeria Benin Ethiopia Kenya Tanzania
Unordered List โ The second type of list that you may wish to include is an unordered list. โ This is better known as a bullet point list and contains no numbers.
Brands Mazda Lexus Subaru
Description List
โ The HTML element represents a description list. โ The element encloses a list of groups of terms (specified using the element) and descriptions (provided by elements). โ Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs.
Exercises
- Come up with a code for this.
HTML Tables
โ Tables are used in HTML documents (web pages) to present tabular data. โ A table is defined using the element and contains several table cells ( , for โtable dataโ ) which are organized into table rows ( ). โ A table's markup (HTML code) is always based on rows, never columns. โ Table cells that act as column headers or row headers should use the (table header) element. โ Table cells can be merged using the colspan and rowspan attributes. โ Tables can be broken into sections using the following elements: โ Table header โ Table body โ Table footer colspan rowspan
Mercy 20 years Canada
Mark
Sydney
This is the footer
Exercises
- Create a simple table.
Name Age Mark 10 Tyler 9
- Create a table showing different scores in different subjects for one learner.
Name Subjects Scores Cecilia Wambui Maths 80 English Science 90 Computer Studies 70 Kiswahili Total Score 390
HTML Forms
โ An HTML Form is a section of the document that collects input from the user. โ The input from the user is generally sent to a server (Web servers, Mail clients, etc). โ We use the HTML element to create forms in HTML. โ HTML forms are used for user input, such as submitting a search query, creating a user account, or making a purchase. โ A form is represented by the tag and each form control, such as text fields, radio buttons, and checkboxes, are represented by different HTML elements. โ The action attribute of the form specifies where the form data will be sent when the form is submitted. The method attribute specifies the HTTP method used to send the form data. โ An HTML form is a section of a document which contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, menus etc.
Tag Description
It defines a HTML form to enter inputs by the used side.
It defines an input control.
Exercises
- Create a form (you decide what kind of form to create) a. Incorporate all the various input types learnt today. b. Research on how to add a selection to your forms
- Start working on Week 1 project on the LMS.
Semantic Elements
โ HTML5 introduced semantic elements, which provide more meaning to the content and structure of a web page. โ Some common semantic elements include: โ : Represents the header of a document or section. โ : Represents a section of a page that contains navigation links. โ : Represents the main content of a document. โ : Represents a self-contained composition in a document, such as a blog post or a news story. โ : Represents a standalone section of a document, such as a chapter. โ : Represents a section of a page that contains content that is tangentially related to the main content. โ : Represents the footer of a document or section.
The element defines a section in a document. Examples: โ Chapters โ Introduction โ News items โ Contact information
WWF
The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.
WWF's Panda symbol
The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.
specifies independent, self-contained content Examples: โ Forum posts โ Blog posts โ User comments โ Product cards โ Newspaper articles
Google Chrome
The element defines a footer for a document or section. A element typically contains: โ authorship information โ copyright information โ contact information โ back to top links โ related documents
Author: William Jones
[email protected]
Defines a set of navigation links.
HTML | CSS | JavaScript | ReactJS
The HTML element represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars.
The Rough-skinned Newt defends itself with a deadly neurotoxin.
Exercise
- Practice the semantic elements
