HTML is the standard markup language for creating web pages. Key HTML elements include headings, paragraphs, links, images and tables. HTML pages use tags like <h1> for headings, <p> for paragraphs, <a> for links, <img> for images and <table> to define tables with <tr> for rows and <td> for cells. CSS can control the look of HTML elements using styles, colors and positioning.
HTML is the standard markup language for creating web pages. Key HTML elements include headings, paragraphs, links, images and tables. HTML pages use tags like <h1> for headings, <p> for paragraphs, <a> for links, <img> for images and <table> to define tables with <tr> for rows and <td> for cells. CSS can control the look of HTML elements using styles, colors and positioning.
HTML is the standard markup language for creating web pages. Key HTML elements include headings, paragraphs, links, images and tables. HTML pages use tags like <h1> for headings, <p> for paragraphs, <a> for links, <img> for images and <table> to define tables with <tr> for rows and <td> for cells. CSS can control the look of HTML elements using styles, colors and positioning.
HTML is the standard markup language for creating web pages. Key HTML elements include headings, paragraphs, links, images and tables. HTML pages use tags like <h1> for headings, <p> for paragraphs, <a> for links, <img> for images and <table> to define tables with <tr> for rows and <td> for cells. CSS can control the look of HTML elements using styles, colors and positioning.
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is
a paragraph", "this is a link", etc.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The <!DOCTYPE html> declaration defines that this document is an
HTML5 document
All HTML documents must start with a document type declaration:
<!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>. The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading
HTML paragraphs are defined with the <p> tag
HTML links are defined with the <a> tag
<a href="https://www.w3schools.com">This is a link</a>
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes
The <br> tag defines a line break, and is an empty element without a closing tag
The style attribute is used to add styles to an element, such as color, font, size, and more You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Country codes can also be added to the language code in the lang attribute. So, the first two characters define the language of the HTML page, and the last two characters define the country.
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
The title attribute defines some extra information about an element.
The value of the title attribute will be displayed as a tooltip when you mouse over the element
<p title="I'm a tooltip">This is a paragraph.</p>
The HTML standard does not require quotes around attribute values.
However, W3C recommends quotes in HTML, and demands quotes for
stricter document types like XHTML HTML ATTRIBUTES
All HTML elements can have attributes
The href attribute of <a> specifies the URL of the page the link goes to
The src attribute of <img> specifies the path to the image to be displayed
The width and height attributes of <img> provide size information for images
The alt attribute of <img> provides an alternate text for an image
The style attribute is used to add styles to an element, such as color, font, size, and more
The lang attribute of the <html> tag declares the language of the Web page
The title attribute defines some extra information about an element
Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property
<h1 style="font-size:60px;">Heading 1</h1>
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule(Line).
The <hr> element is used to separate content (or define a change) in an
HTML page
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually
Courier), and it preserves both spaces and line breaks
The HTML style attribute is used to add styles to an element, such as color, font, size, and more. <tagname style="property:value;">
The CSS background-color property defines the background color for an
HTML element.
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
The CSS color property defines the text color for an HTML element
Formatting elements were designed to display special types of text:
● <b> - Bold text
● <strong> - Important text ● <i> - Italic text ● <em> - Emphasized text ● <mark> - Marked text ● <small> - Smaller text ● <del> - Deleted text ● <ins> - Inserted text ● <sub> - Subscript text ● <sup> - Superscript text
You can add comments to your HTML source by using the following syntax
Inline - by using the style attribute inside HTML element
<h1 style="color:blue;">A Blue Heading</h1>
Internal - by using a <style> element in the <head> section
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External - by using a <link> element to link to an external CSS file
The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL address
By default, the linked page will be displayed in the current browser
window. To change this, you 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 following values:
● _self - Default. Opens the document in the same window/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
● Use the href attribute to define the link address ● Use the target attribute to define where to open the linked document ● Use the <img> element (inside <a>) to use an image as a link ● Use the mailto: scheme inside the href attribute to create a link that opens the user's email program
The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:
● src - Specifies the path to the image
● alt - Specifies an alternate text for the image
You can use the style attribute to specify the width and height of an image.
<img src="img_girl.jpg" alt="Girl in a jacket"
style="width:500px;height:600px;">
Or
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Image Floating
Use the CSS float property to let the image float to the right or to the left of a text:
<p><img src="smiley.gif" alt="Smiley face"
style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="smiley.gif" alt="Smiley face"
style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
● Use the HTML <img> element to define an image
● Use the HTML src attribute to define the URL of the image ● Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed ● Use the HTML width and height attributes or the CSS width and height properties to define the size of the image ● Use the CSS float property to let the image float to the left or to the right
The <table> tag defines an HTML table.
Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td> tag.
By default, the text in <th> elements are bold and centered.
By default, the text in <td> elements are regular and left-aligned
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
● Use the HTML <table> element to define a table
● Use the HTML <tr> element to define a table row ● Use the HTML <td> element to define a table data ● Use the HTML <th> element to define a table heading ● Use the HTML <caption> element to define a table caption ● Use the CSS border property to define a border ● Use the CSS border-collapse property to collapse cell borders ● Use the CSS padding property to add padding to cells ● Use the CSS text-align property to align cell text ● Use the CSS border-spacing property to set the spacing between cells ● Use the colspan attribute to make a cell span many columns ● Use the rowspan attribute to make a cell span many rows ● Use the id attribute to uniquely define one table
HTML lists allow web developers to group a set of related items in lists
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default
● Use the HTML <ul> element to define an unordered list
● Use the CSS list-style-type property to define the list item marker ● Use the HTML <li> element to define a list item ● Lists can be nested ● List items can contain other HTML elements ● Use the CSS property float:left to display a list horizontally
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li> </ul>
</li>
<li>Milk</li>
</ul>
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default
type="1” The list items will be numbered with numbers(default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman
numbers
type="i" The list items will be numbered with lowercase roman
numbers
<ol start="50">
<li>Coffee</li>
<li>Tea</li> <li>Milk</li>
</ol>
● Use the HTML <ol> element to define an ordered list
● Use the HTML type attribute to define the numbering type ● Use the HTML <li> element to define a list item ● Lists can be nested ● List items can contain other HTML elements
The HTML class attribute is used to specify a class for an HTML element.
Multiple HTML elements can share the same class
The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.
In the following example we have three <div> elements with a class
attribute with the value of "city". All of the three <div> elements will be styled equally according to the .city style definition in the head section
Tip: The class attribute can be used on any HTML element.
Note: The class name is case sensitive!
<h2 class="city main">London</h2>
● The HTML class attribute specifies one or more class names for an element ● Classes are used by CSS and JavaScript to select and access specific elements ● The class attribute can be used on any HTML element ● The class name is case sensitive ● Different HTML elements can point to the same class name ● JavaScript can access elements with a specific class name with the getElementsByClassName() method
The HTML id attribute is used to specify a unique id for an HTML
element. You cannot have more than one element with the same id in an HTML document.
The id attribute specifies a unique id for an HTML element. The value of
the id attribute must be unique within the HTML document.
The id attribute is used to point to a specific style declaration in a style
sheet. It is also used by JavaScript to access and manipulate the element with the specific id.
The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}.
In the following example we have an <h1> element that points to the id
name "myHeader". This <h1> element will be styled according to the #myHeader style definition in the head section:
<h1 id="myHeader">My Cities</h1>
Difference Between Class and ID
A class name can be used by multiple HTML elements, while an id name
must only be used by one HTML element within the page
HTML Bookmarks with ID and Links
HTML bookmarks are used to allow readers to jump to specific parts of a
webpage.
Bookmarks can be useful if your page is very long.
To use a bookmark, you must first create it, and then add a link to it.
Then, when the link is clicked, the page will scroll to the location with the bookmark
<h2 id="C4">Chapter 4</h2>
<a href="#C4">Jump to Chapter 4</a>
The HTML <form> element is used to create an HTML form for user input:
The <form> element is a container for different types of input
elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on
the type attribute.
Type Description
<input type="text"> Displays a single-line text input field
<input Displays a radio button (for selecting one of
type="radio"> many choices)
<input Displays a checkbox (for selecting zero or
type="checkbox"> more of many choices)
<input Displays a submit button (for submitting
type="submit"> the form)
<input Displays a clickable button
type="button">
The <input type="text"> defines a single-line input field for text
input. <form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Notice the use of the <label> element in the example above.
The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because the
screen-reader will read out loud the label when the user focus on the input element.
The <label> element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.
The for attribute of the <label> tag should be equal to the id
attribute of the <input> element to bind them together.
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
Get The Routledge Social Science Handbook of AI Routledge International Handbooks 1st Edition Anthony Elliott (Editor) PDF ebook with Full Chapters Now
Get The Routledge Social Science Handbook of AI Routledge International Handbooks 1st Edition Anthony Elliott (Editor) PDF ebook with Full Chapters Now
