Day 001

Day 001

lets say hello in html way to every one.

! Enter or HTML Enter

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello</h1>
</body>
</html>

Output

now lets see the output as you can see this is the output. its simple right lets make it more attractive.

now lets add css in head link:css enter 

<link rel="stylesheet" href="style.css">

now lets set background color as i am using external CSS type because it gives more advantage. we can inherit the same style for other pages also

body{
    background-color: rgb(28, 30, 41);   
}

now as you can see the background is changed but the text is not visible so lets change the text as well

h1{
    color: aliceblue;
    white-space: initial;
    text-align: center;
}

now you see the text in aligned and is visible.

lets make it more interactive before that lets go to https://animista.net/play/text animista where we will get awesome css effect or animations to use.

now i already used for text and background you can use even more then this as it is open-source and free to use in your project.

is it interesting

lets go though HTML basics and CSS basics which will help you a lot....

HTML Books Links

HTML HTML Canvas

HTML Notes

HTML - Hypertext Markup Language CSS - Cascading Style Sheets

HTML is sometimes called a programming language but it has no logic, so is a markup language. HTML tags provide semantic meaning and machine-readability to the content in the page.

An element usually consists of an opening tag (), a closing tag (), which contain the element's name surrounded by angle brackets, and the content in between: ...content...

There are some HTML elements that don't have a closing tag or any contents. These are called void elements. Void elements include

<img>, <meta>, <link> and <input>.

A HTML page may consist of potentially hundreds of elements which are then read by a web browser, interpreted and rendered into human readable or audible content on the screen.

Elements: video, audio, table, footer

Tags: <video>, <audio>, <table>, <footer>, </html>, </body>

<p> tag represents a common paragraph.

Elements commonly have an opening tag and a closing tag. The opening tag contains the element's name in angle brackets (<p>). The closing tag is identical to the opening tag with the addition of a forward slash (/) between the opening bracket and the element's name (</p>).
Content can then go between these two tags: 
                <p>This is a simple paragraph.</p>

Creating a Simple Page

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello!</title>
    </head>
    <body>
        <h1>Hello World!</h1>
        <p>This is a simple paragraph.</p>
    </body>
</html>

Output

Lets Break Down Simple Page

Tags

Meaning

<!DOCTYPE>

Defines the HTML version used in the document. In this case it is HTML5.

<html>

Opens the page. No markup should come after the closing tag (</html>). The lang attribute declares the primary language of the page using the ISO language codes (en for English).

<head>

Opens the head section, which does not appear in the main browser window but mainly contains information about the HTML document, called metadata. It can also contain imports from external stylesheets and scripts. The closing tag is </head>.

<meta>

Gives the browser some metadata about the document. The charset attribute declares the character encoding. Modern HTML documents should always use UTF-8, even though it is not a requirement. In HTML, the <meta> tag does not require a closing tag.

<title>

The title of the page. Text written between this opening and the closing tag (</title>) will be displayed on the tab of the page or in the title bar of the browser.

<body>

Opens the part of the document displayed to users, i.e. all the visible or audible content of a page. No content should be added after the closing tag </body>.

<h1>

A level 1 heading for the page. See headings for more information

<p>

Represents a common paragraph of text.

Headings

Headings range from H1 to H6 which represents different size, Width...

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Paragraph

<p> Paragraph Tag <br> Single line break <pre> Defines pre-formatted text

" With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code. " (The browser will remove any extra spaces and extra lines when the page is displayed)

Text Formatting

While most HTML tags are used to create elements, HTML also provides in-text formatting tags to apply specific text-related styles to portions of text. This topic includes examples of HTML text formatting such as highlighting, bolding, underlining, subscript, and stricken text.

Highlighting

The <mark> element is new in HTML5 and is used to mark or highlight text in a document code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mark</title>
</head>
<body>
    <p>
        Hello this code it to represent <mark>mark</mark> tag
    </p>
</body>
</html>

Bold, Italic, and Underline

BOLD To bold text, use the <strong> or <b> tags:

<strong>Bold Text Here</strong>

or

<b>Bold Text Here</b

Italic To italicize text, use the <em> or <i> tags:

<em>Italicized Text Here</em>
or
<i>Italicized Text Here</i>

What’s the difference? Semantics. <em> is used to indicate that the text should have extra emphasis that should be stressed, while <i> simply represents text which should be set off from the normal text around it.

UnderLine Text

While the <u> element itself was deprecated in HTMl 4, it was reintroduced with alternate semantic meaning in HTML 5 - to represent an unarticulated, non-textual annotation. You might use such a rendering to indicate misspelled text on the page, or for a Chinese proper name mark.

<p>This paragraph contains some <u>mispelled</u> text.</p>

Abbreviation

To mark some expression as an abbreviation, use <abbr> tag:

<p> Like to write <abbr title="Hypertext Markup Language"> HTML </abbr> ! </p>

Inserted, Deleted, or Stricken

To mark text as inserted, use the <ins> tag:

<ins>New Text</ins>

To mark text as deleted, use the <del> tag:

<del>Deleted Text</del>

To strike through text, use the <s> tag:

<s>Struck-through text here</s>

Superscript and Subscript

To offset text either upward or downward you can use the tags <sup> and <sub>. To create superscript:

<sup>superscript here</sup>

To create subscript:

<sub>subscript here</sub>

Anchors and HyperLink

Parameter

Deatils

herf

Specifies the destination address. It can be an absolute or relative URL, or the name of an anchor.

herflang

Specifies the language of the resource linked by the href attribute

rel

Specifies the relationship between the current document and the linked document.

target

Specifies where to open the link, e.g. in a new tab or window. Possible values are _blank, _self, _parent, _top, and framename (deprecated)

title

Specifies extra information about a link

download

Specifies that the target will be downloaded when a user clicks on the hyperlink. The value of the attribute will be the name of the downloaded file.

Anchor tags are commonly used to link separate webpages, but they can also be used to link between different places in a single document, often within table of contents or even launch external applications. This topic explains the implementation and application of HTML anchor tags in various roles

Resources Links

PreviousDay 01 - 06: HTMLNextML Index

Last updated

Was this helpful?