- 48 flashcards
write basic (essential) tags HTML for Write Html code
type of doc and html and body tags
<!DOCTYPE html>
<html>
<body>
</body>
</html>
note :
All HTML documents must start with a <!DOCTYPE> declaration.
The declaration is not an HTML tag. It is an "information" to the browser about what document type to expect.
Tip: The <!DOCTYPE> declaration is NOT case sensitive.
Older HTML Documents:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
When authoring document is HTML or XHTML, it is important to Add a Doctype declaration. This makes sure the document will be parsed the same way by different browsers.
The simplest and most reliable doctype declaration to use is the one defined in HTML5:
<!DOCTYPE html>
- The
<!DOCTYPE html>declaration defines that this document is an HTML5 document - 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.
HTML Headings
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
My first paragraph [paragraph TAG]
<p>My first paragraph.</p>
note :
Browsers automatically add a single blank line before and after each <p> element.
The href Attribute in link
<a href="https://www.w3schools.com">Visit W3Schools</a>
note :
The href attribute specifies the URL of the page the link goes to.
Tip: You can use href="#top" or href="#" to link to the top of the current page!
If the href attribute is not present, the <a> tag is not a hyperlink.
The path image location in image Tag
<img src="img_girl.jpg">
note :
The <img> tag is used to embed an image in an HTML 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 has two required attributes:
- src - Specifies the path to the image
- alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed
Note: Also, always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.
Tip: To link an image to another document, simply nest the <img> tag inside an <a> tag
The width and height Attributes in Image
<img src="img_girl.jpg" width="500" height="600">
show a text when a image not load .
<img src="img_girl.jpg" alt="Girl with a jacket">
change paragraph color text to red
<p style="color:red;">This is a red paragraph.</p>
The style attribute is used to add styles to an element, such as color, font, size, and more.
show a hint when mouse on a paragraph
<p title="I'm a tooltip">This is a paragraph.</p>
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:
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
The <hr> element is used to separate content (or define a change) in an HTML page:
add a enter(next line) in paragraph text
<p>This is<br>a paragraph<br>with line breaks.</p>
what is structure of style in tags
<tagname style="property:value;">
Bold text tag
<b>
alternative bold for important text tag
<strong>
Emphasized text tag
<em>
Marked text tag
<mark>
Smaller text tag
<small>
Deleted text tag
<del>
Inserted text tag
<ins>
Subscript text tag
<sub>
Superscript text tag
<sup>
HTML Quotations tag this text
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
HTML Short Quotations tag this text
<p>Browsers usually insert quotation marks around the q element.</p>
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
HTML tag for Abbreviations
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p>Marking up abbreviations can give useful information to browsers, translation systems and search-engines.</p>
HTML tag for Contact Information
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
tag for Work Title and copyright
<img src="img_the_scream.jpg" width="220" height="277" alt="The Scream">
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
Bi-Directional Override tag
<p>If your browser supports bi-directional override (bdo), the next line will be written from right to left (rtl):</p>
<bdo dir="rtl">This line will be written from right to left</bdo>
HTML Comment Tags tag
<!-- Write your comments here -->
Background Color style in tag
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
Text Color style in tag
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
Border Color style in tag
<h1 style="border: 2px solid Tomato;">Hello World</h1>
<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>
<h1 style="border: 2px solid Violet;">Hello World</h1>
Color Values style in tag
<p>Same as color name "Tomato":</p>
<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>
<p>Same as color name "Tomato", but 50% transparent:</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>
<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p>
What is CSS? (C-S-S ? )
-definition
Cascading Style Sheets (CSS) is used to format the layout of a webpage.
With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors to be used, different displays for different devices and screen sizes, and much more!
Link to an Email Address tag
<a href="mailto:someone@example.com">Send email</a>
Button as a Link tag
<h2>Button as a Links</h2>
<p>Click the button to go to the HTML tutorial.</p>
<button onclick="document.location='default.asp'">HTML Tutorial</button>
Link Titles tag
<h2>Link Titles</h2>
<p>The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.</p>
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>
how add a external path in link tag
<h2>External Paths</h2>
<p>This example uses a full URL to link to a web page:</p>
<p><a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a></p>
make a table with two rows and two columns
<!DOCTYPE html>
<html>
<body>
<table > <tr> <th>Firstname</th> <th>Lastname</th> </tr> <tr> <td>Jill</td> <td>Smith</td> </tr> </table>
</body>
</html>
make a unordered list and add this items to it :
coffee
tea
milk
<!DOCTYPE html>
<html>
<body>
<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
</body>
</html>
make a ordered list and add this items to it :
coffee
tea
milk
<!DOCTYPE html>
<html>
<body>
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
</body>
</html>
what is Block-level Elements
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
Here are the block-level elements in HTML:
space usage:
Inline Elements
An inline element does not start on a new line and it only takes up as much width as necessary.
show a inline text with border 1px in a line
<!DOCTYPE html>
<html>
<body>
<p>This is an inline span <span style="border: 1px solid black">Hello World</span> element inside a paragraph.</p>
</body>
</html>
what is HTML class Attribute
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.
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city"> <h2>London</h2> <p>London is the capital of England.</p> </div>
</body>
</html>
different Id vs class
id is just for a element but class is for multi element
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "city" */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>
<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
HTML id Attribute
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.
write a code that a html elements blong to more than one class.
<h2 class="city main">London</h2>
Italic text tag
<i>