Scribd
Upload
1 views

Coding

The document provides a comprehensive overview of HTML structure and elements, including tags for paragraphs, headings, lists, links, and images. It emphasizes the importance of indentation for readability, attributes for customization, and CSS for styling elements. Additionally, it covers best practices for accessibility and organization of HTML content.

Uploaded by

reyeslol900900
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
1 views

Coding

The document provides a comprehensive overview of HTML structure and elements, including tags for paragraphs, headings, lists, links, and images. It emphasizes the importance of indentation for readability, attributes for customization, and CSS for styling elements. Additionally, it covers best practices for accessibility and organization of HTML content.

Uploaded by

reyeslol900900
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

<p> is the opening tag.

Hello World! is the content.

</p> is the closing tag.

<body> opening tag begins the "body".

<p>👋 I'm a new web developer!</p> is some text in a paragraph


element.

</body> closing tag ends the "body".

While indenting HTML code isn't required, doing so is good practice


because it makes your code easier to read and visualize the nesting
levels.

Here's how to indent the previous code block:

<body>

<p>👋 I'm a new web developer!</p>

</body>

Notice how it's a lot easier to read this way!

We recommend two spaces for indentations.

There are six levels of headings, from <h1> to <h6>:

<h1>Heading level 1</h1>

<h2>Heading level 2</h2>

<h3>Heading level 3</h3>

<h4>Heading level 4</h4>

<h5>Heading level 5</h5>

<h6>Heading level 6</h6>


Suppose we also want to add a new line within a paragraph element.
Pressing enter won't do us any good because HTML ignores multiple
spaces and line breaks within elements.

So we must use the <br> break tag here!

The <br> break tag adds a line break:

<b> element to bold text.

<i> element to italicize text.

<u> element to underline text.

<s> element to strikethrough text.

<strong> - Important text

<em> - Emphasized text

<mark> - Marked text

<small> - Smaller text

<del> - Deleted text

<ins> - Inserted text

<sub> - Subscript text

<sup> - Superscript text

 <ul> Unordered lists

 <ol> Ordered lists

For unordered lists, also known as bullet points, start with the <ul> tag
and wrap each item in a <li> list item element. Like so:

For ordered lists, also known as numbered lists, we use


the <ol> element:
How do we add a link to our web page?

We can use the <a> anchor element! This link tag allows us to add
a hyperlink to a piece of text.

Let's see how we can do this:

<a href="https://archive.org/web">Internet Archive</a>

What if we want to add images? We can use a similar format, but with
the <img> image element.

<p>Here's a cute pic:</p>

<img src="https://i.redd.it/5unn16axx1v81.jpg">

The <img> image element is another self-closing tag, so it doesn't have a


closing tag.

Note: This can also be used to point to an email or phone number using
a mailto:, tel:, or sms: parameter:

 <a href="mailto:[email protected]">📧</a>

 <a href="tel:212-555-2368">🤙</a>

 <a href="sms:320-250-HTML">💬</a>

CHAPTER 2

all HTML files must start with a <!DOCTYPE html> declaration and
the <html> element:

<!DOCTYPE html>

<html>

Code goes here

</html>

Notice how the <!DOCTYPE html> doesn’t have a closing tag,


while <html> does.

Inside <html>, there should be two elements:


 <head> contains all the info for your browser that's not visible on the
page.

 <body> contains all of the content that you will end up seeing on the
page.

<!DOCTYPE html>

<html>

<head>

<title>Codédex | Start your coding adventure ⋆˙⟡</title>

</head>

<body>

Code goes here

</body>

</html>

<!-- I am a comment. -->

Attributes are additional settings that we can use to customize an element.

They are usually name/value pairs, like name="value", where the name and
value are separated by an equals sign:

<element name="value">Content</element>

f we want to use lowercase letters instead:

<ol type="a">

<li>Power ⚡</li>

<li>Courage 🔥</li>

<li>Wisdom 🦉</li>

</ol>

In addition to src, we can also use the alt attribute to make our images more
accessible.
<img alt="pixel girl using a laptop"
src="https://www.codedex.io/images/tier1.png">

If our image can't appear for some reason, the alt text is displayed instead!
This allows assistive devices to read our text and describe the image. 🦻🏻

We also came across attributes when learning about using links


with <a> anchor tags:

<a href="https://www.codedex.io/">Codédex</a>

The href attribute is where we add a URL that can be visited when the
hyperlinked text is clicked.

We can also use the target attribute and set it to "_blank" to make the link
open in a new browser tab:

<a href="https://www.codedex.io/" target="_blank">Codédex</a>

The two attributes we'll come across most are the class and id attributes.
Any element can use them. While class and id are used for labeling
elements, the two have important differences.

An element can be assigned multiple class values in the form of a space-


separated list:

<p class="first-value second-value third-value">Hello, World</p>

Additionally, id can be used to link to another part of the same page, such as
the heading! This can be matched with an <a> anchor
element's href attribute via a # hashtag symbol, followed by the identifier
used for the id:

<a href="#medellin">Link to Medellín</a>

<h2 class="city" id="medellin">Medellín 🇨🇴</h2>

Lastly, where only one id can be assigned to a single element, a class can be
assigned to many:

<h2 class="city" id="medellin">Medellín 🇨🇴</h2>

<h2 class="city" id="lisbon">Lisbon 🇵🇹</h2>


<h2 class="city" id="bali">Bali 🇮🇩</h2>

For example, look at this website:

<div class="page-section" id="about-me">

<h2>About Me</h2>

<p>Ness is an aspiring web developer!</p>

</div>

<div class="page-section" id="social-media">

<h2>Social:</h2>

<ul>

<li>GitHub</li>

<li>Twitter</li>

<li>LinkedIn</li>

</ul>

</div>

First, we can apply a style attribute to any HTML element to stylize certain
aspects of that element, such as what color the text should be:

<p>

Roses are <span style="color:red;">red</span>.<br />

Violets are <span style="color:blue;">blue</span>.

</p>

This attribute uses a special syntax where a style is made of a property


(i.e., color) and a value (red), separated by a : colon. Multiple styles can be
applied to a single element, but they must be separated by a ; semi-colon.

<p>

Roses are <span style="color:red;


text-decoration:underline;">red</span>.<br />
Violets are <span style="color:blue;
text-decoration:underline;">blue</span>.

</p>

The width and height Attributes

The <img> tag should also contain the width and height attributes, which
specify the width and height of the image (in pixels):

Example

<img src="img_girl.jpg" width="500" height="600">

The lang Attribute

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.

The following example specifies English as the language:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

Bigger Headings

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:

Example
<h1 style="font-size:60px;">Heading 1</h1>

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:

Example

<h1>This is heading 1</h1>


<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

Solution - The HTML <pre> Element

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:

Example

<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.


</pre>
Background Color

The CSS background-color property defines the background color for an


HTML element.

Example

Set the background color for a page to powderblue:

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

Example

Set background color for two different elements:

<body>

<h1 style="background-color:powderblue;">This is a heading</h1>


<p style="background-color:tomato;">This is a paragraph.</p>

</body>

Text Color

The CSS color property defines the text color for an HTML element:

Example

<h1 style="color:blue;">This is a heading</h1>


<p style="color:red;">This is a paragraph.</p>

Fonts
The CSS font-family property defines the font to be used for an HTML
element:

Example

<h1 style="font-family:verdana;">This is a heading</h1>


<p style="font-family:courier;">This is a paragraph.</p>

Text Size

The CSS font-size property defines the text size for an HTML element:

Example

<h1 style="font-size:300%;">This is a heading</h1>


<p style="font-size:160%;">This is a paragraph.</p>

Text Alignment

The CSS text-align property defines the horizontal text alignment for an
HTML element:

Example

<h1 style="text-align:center;">Centered Heading</h1>


<p style="text-align:center;">Centered paragraph.</p>

HTML <blockquote> for Quotations

The HTML <blockquote> element defines a section that is quoted from


another source.

Browsers usually indent <blockquote> elements.

Example

<p>Here is a quote from WWF's website:</p>


<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 60 years, WWF has worked to help people and nature thrive. As the
world's leading conservation organization, WWF works in nearly 100
countries. At every level, we collaborate with people around the world to
develop and deliver innovative solutions that protect communities, wildlife,
and the places in which they live.
</blockquote>

The HTML <q> tag defines a short quotation.


HTML <abbr> for Abbreviations

The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML",


"CSS", "Mr.", "Dr.", "ASAP", "ATM".

Marking abbreviations can give useful information to browsers, translation


systems and search-engines.

Tip: Use the global title attribute to show the description for the
abbreviation/acronym when you mouse over the element.

Example

<p>The <abbr title="World Health Organization">WHO</abbr> was


founded in 1948.</p>

HTML <address> for Contact Information

The HTML <address> tag defines the contact information for the
author/owner of a document or an article.

The HTML <cite> tag defines the title of a creative work (e.g. a book, a
poem, a song, a movie, a painting, a sculpture, etc.).

HTML <bdo> for Bi-Directional Override

BDO stands for Bi-Directional Override.

The HTML <bdo> tag is used to override the current text direction:

Example

<bdo dir="rtl">This text will be written from right to left</bdo>

Border Color

You can set the color of borders:


Example

<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>

Internal CSS

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within


a <style> element.

The following example sets the text color of ALL the <h1> elements (on that
page) to blue, and the text color of ALL the <p> elements to red. In addition,
the page will be displayed with a "powderblue" background color:

Example

<!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>

CSS Padding

The CSS padding property defines a padding (space) between the text and
the border.
Example

Use of CSS border and padding properties:

p{
border: 2px solid powderblue;
padding: 30px;
}

You might also like