Best HTML Notes

LEARNING THE HTML Markup LanguageContents 1.Introduction to HTML 2.Tags 3.What’s in the HTML website? 4.How to add a text 5.Indentation and more tags 6. Lists 7.Hyperlinks 8.Images 9.Basic page structure 10.DIV and SPAN 03 06 09 13 17 19 21 24 27 311.Introduction to HTML HTML is an abbreviation for Hypertext Markup Language. It may sound daunting but don’t worry. It’s simply the language used for building websites. We use a HTML to define the content and structure of the website. We use HTML to describe every element on a website. The browser will know how to interpret these elements and how to display them. Take a look at the following examples. Think for a moment about code and how it’s interpreted by the browser: Learning the HTML 03First example: Header Header Second example:
The text in the paragraph
Paragraph Last example: We write and publish the HTML code in a document with an ".Atm|" extension. The browser knows that such a document contains HTML code and knows how to deal with its content. Learning the HTML 04For example: We want to create an HTML document named "index". So we create a document named "index.html" - with an ".AtmI" extension. HTML will allow you to add to your website any element imaginable. You can build: * headings, * paragraphs, ¢ forms, ¢ data tables, ¢ video and audio player, ¢ hyperlinks, ¢ graphics, * and much more... Learning the HTML 052. Tags We already used some tags in the previous lessons. Now we will take a closer look at them. Here is an example of a simple tag: Header What's important: * - this an opening tag. The browser will know that it should interpret the following code as a level 1 heading. ¢ Welcome - this is the text that will be displayed as a level 1 heading ¢ - this is the closing tag. This is the end of our heading Everything we put between
and
tags will be displayed as a level 1 heading. Learning the HTML 06There are some of different tags: e - level 1 heading
- paragraph e - hyperlink
- table
- section
- footer ¢ - important/bold text ¢ - navigation These tags above are selected examples of vast possibilities offered by HTML. Note that we write tag names in lowercase - it’s for a convenience and readability reasons. Learning the HTML 07Majority of HTML elements include both opening and closing tags. That’s because they usually include some content inside e.g. text. There are also special elements that use only an opening tag. We sometimes call them "self-closing elements". Elements using both opening and closing tags: ¢
- paragraph e - heading h1 e This is the content. Elements using only opening tags (self-closing elements): ¢
- horizontal rule e - image e ¢ e Learning the HTML os3. What's in the HTML website? In order to render our website correctly, the browser needs to know that it’s dealing with a proper HTML document. It will allow the browser to correctly parse and display the contents of the website. For this task we need to start our HTML document with a special declaration. Every website consists of two main parts: 1.important information for the browser 2.content of the page accessible by humans Learning the HTML 09They are wrapped with the: and tags. Both parts are always wrapped with an tag. Takea look at the code: HEAD section BODY section aA eho B le Every webpage needs a title. We place the title in the section of the page. It should be surrounded by the tags also. Learning the HTML 10They are wrapped with the: and tags. Both parts are always wrapped with an tag. Take a look at the code: HTML Course The title will be visible at the top of the browser window. It is also visible in the Google search results: J G learn HTML - Google Search x ] € > C @ google.com/searc The title is a very important element for both the users of our website and the search engines bots. Learning the HTML NIn the previous exercise you may have noticed this declaration: It’s a tag with a charset attribute. It’s a very important element. It ensures that you can use characters from just about any language in your HTML document, and they will display reliably. Note that this element is utilized by the browser and that’s why we place it in the section. Learning the HTML 124. How to add a text Paragraphs are blocks of text separated visually from adjacent blocks by a blank line. To create a paragraph we use this simple code:
This is a paragraph
It’s simply a block of text surrounded with
tags. Usually it will include a few sentences of text. Here is the output of the above code: This is a paragraph Learning the HTML 13In most cases you will also need some headings. You can use them to declare a title of the article or a section. Here is an example of level 1 heading (h1): This is a level 1 heading Headings usually are much shorter than paragraphs - in most cases they will contain a few words. There six levels of headings available in the HTML: e
Heading level 1
e
Heading level 2
e
Heading level 3
e
Heading level 4

Heading level 5

Heading level 6
Learning the HTML 4 is the most important heading.
is the least important heading. Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 Some parts of the text need to be emphasised: DUES eae aa P RE MEn Lr aa Mae eae: Be This text has been emphasised Learning the HTML 15You can emphasise the text by wrapping it with or tags. This text is important. This text has been emphasised. Sometimes a piece of text needs to be marked as a quotation or citation. Take a look at the code:
"This is a great introduction to HTML"
That’s how it looks in the browser: Here is the quote: "This is a great introduction to HTML" In most cases the text of the quotation will be indented but in practice it’s browser dependent. Learning the HTML 165. Indentation and more tags You may have already noticed that we indent tags that are placed inside another tag. Take a look at the example:
This is a paragraph

"It's a citation!"
< p>This is another paragraph
What's the purpose of this indentation? We use the indentations to make our code more readable. The browser will ignore them anyway. Learning the HTML 17But developers are another matter. They need a clean code that is easy to read. That’s why you should always properly indent every line of code. In practice we use Spaces or Tabs to add indentation. We use the below tag to visually separate two distinct sections. Take a look:
Here is the result in the browser: This is a paragraph This is another paragraph Note that the
tag is self-closing! Learning the HTML 186. Lists There are two basic kinds of lists. An unordered list: ° bread ¢ butter ¢ milk And an ordered list: 1.go straight ahead 2.turn right 3.then turn left The code for both kinds of lists look like this: Learning the HTML 19an unordered list
bread
butter
False ee
go straight ahead

turn right

then turn left
Note that some elements are common for both kinds of lists - namely the <\i> tag. Learning the HTML 207. Hyperlinks Let’s a hyperlink to Google webpage. Here is the code: Google The hyperlink usually looks like this: Google If we click on this link we will be redirected to the Google homepage. Let’s take a closer look at the hyperlink code: Google Learning the HTML 21¢ Hyperlink text is alway wrapped with tags. ¢ We always add a "href" attribute to the opening tag (). ¢ We use the href attribute to declare a URL - the address of the webpage/document we will be redirected to after clicking the link. There are two basic kinds of hyperlinks: Google Absolute hyperlink - links to the external webpage e.g. We need to provide the full domain name e.g. http://google.com Learning the HTML 22Contact Page Relative hyperlink - links to the internal page or document. We need to provide the path to the document e.g. contact.html Learning the HTML 238. Images Take a look at the code: PER te Mepcoeee ttc pele eS ¢ img tag is self-closing. So we use only an opening tag. * src attribute is using to declare a path to the image file. So using this simple code we can easily add the image to our webpage. There is an additional, very important attribute that you should always add to every image: Learning the HTML 24¢ The alt attribute specifies an alternate text for an area, if the image cannot be displayed. ¢ The alt attribute is required if the href attribute is present. It can look like this: eA colourful sunset Let’s get back to the alt attribute. There are several important reasons to use this attribute for every image we add to the website: If for some reason the image won't load we will still get to see the text of the alt attribute. Learning the HTML 25¢ There are numerous people with disabilities, poor vision etc. They browse the Web with a special screen reader software that read aloud the text content of the page. Images without alt text are useless for them. * Search engines, like Google, need to know what's the content of the image. So they simply read the value of the alt text. The alt attribute is very important! You should always add it to every image on your website. Learning the HTML 269. Basic page structure Every website needs a basic structural skeleton. Think of some websites you visit frequently. You could without a doubt describe some elements that are common for every site e.g. header, menu or footer. Now you will learn how to build such elements using a few HTML tags. We could build an unlimited number of websites based on this simple schema: Learning the HTML 27“oer LT * Header - located at the very top. It usually includes elements like: logo, menu etc. ¢ Main content - well... main content of the website: articles, videos, images etc. Learning the HTML 28¢ Footer - located at the very bottom. Usually includes some basic info about the website, contact information etc. You can easily recreate this structure using these tags: «
- Header (don't confuse with headings h1-h6!) ¢
- Main content ©
- Footer Properly built website should be based on a semantic markup. Using semantic markup we make sure that all elements on our website are properly described. In other words: every element should have a meaning. It’s very important for several reasons: Learning the HTML 29* Google search engine needs to know what elements on a webpage are the most important ones. ¢ People with disabilities are often using a screen reader. Such a software in order to work needs to know what’s the purpose of a given HTML element. The elements you've just seen are good examples of semantic tags: e
- we use this tag to define The Header *
- we use this tag to define The Main Content «
- we use this tag to define The Footer So these are not ordinary tags. They give meaning to the elements of our website. Learning the HTML 3010. DIV and SPAN Sometimes there won't be a suitable semantic tag for a given element. That’s why the HTML comes with two very useful tags: DIV and SPAN. They are pretty common so you should learn how to use them. We have a code for a simple shopping cart. We need to group all elements together. Since HTML doesn't have a semantic tag for a cart we need to use a generic tag: >Product no.1 <1i>Product no.2 yates Paces Learning the HTML 31We grouped all elements with the
tag. It's a generic container for elements that for some reason belong together. There are two main reasons for using the
tag: * we need to style the elements as one group ¢ there is no suitable tag for a given element Remember that the
tag itself won't change the appearance of elements. It’s simply a way to group all elements together. Learning the HTML 32Sometimes we need to group some parts of the text for styling purposes. We can use a or tags but in some cases their usefulness is limited. That's why we got a tag. It’s a generic container for text: Tekst We wrap a piece of text with a pair of tags. It will allow us to style this text with CSS stylesheets. We added a tag in the previous examples to target a piece of text with a CSS rule. That way we can easily style any part of the text. Here is a simple example: Learning the HTML 33My mother has blue eyes and my father has dark green eyes. In order to make it work we need to add a class attribute: Brn TE e">Some t! Then we can easily style this “blue” class with a suitable color using CSS stylesheet. We won't go into writing the CSS for now - it is a complex topic outside of the scope of this course. Learning the HTML 34
You might also like
The Little Book of Hygge: Danish Secrets to Happy Living
From Everand
The Little Book of Hygge: Danish Secrets to Happy Living
Meik Wiking
Rating: 3.5 out of 5 stars
3.5/5 (401)
Hidden Figures: The American Dream and the Untold Story of the Black Women Mathematicians Who Helped Win the Space Race
From Everand
Hidden Figures: The American Dream and the Untold Story of the Black Women Mathematicians Who Helped Win the Space Race
Margot Lee Shetterly
Rating: 4 out of 5 stars
4/5 (897)
The Yellow House: A Memoir (2019 National Book Award Winner)
From Everand
The Yellow House: A Memoir (2019 National Book Award Winner)
Sarah M. Broom
4/5 (98)
Magazines
Podcasts
Sheet music
The Subtle Art of Not Giving a F*ck: A Counterintuitive Approach to Living a Good Life
From Everand
The Subtle Art of Not Giving a F*ck: A Counterintuitive Approach to Living a Good Life
Mark Manson
4/5 (5807)
Devil in the Grove: Thurgood Marshall, the Groveland Boys, and the Dawn of a New America
From Everand
Devil in the Grove: Thurgood Marshall, the Groveland Boys, and the Dawn of a New America
Gilbert King
4.5/5 (266)
Shoe Dog: A Memoir by the Creator of Nike
From Everand
Shoe Dog: A Memoir by the Creator of Nike
Phil Knight
4.5/5 (537)
Grit: The Power of Passion and Perseverance
From Everand
Grit: The Power of Passion and Perseverance
Angela Duckworth
4/5 (590)
Yes Please
From Everand
Yes Please
Amy Poehler
4/5 (1898)
On Fire: The (Burning) Case for a Green New Deal
From Everand
On Fire: The (Burning) Case for a Green New Deal
Naomi Klein
4/5 (74)
Never Split the Difference: Negotiating As If Your Life Depended On It
From Everand
Never Split the Difference: Negotiating As If Your Life Depended On It
Chris Voss
4.5/5 (842)
Principles: Life and Work
From Everand
Principles: Life and Work
Ray Dalio
4/5 (599)
Elon Musk: Tesla, SpaceX, and the Quest for a Fantastic Future
From Everand
Elon Musk: Tesla, SpaceX, and the Quest for a Fantastic Future
Ashlee Vance
4.5/5 (474)
Team of Rivals: The Political Genius of Abraham Lincoln
From Everand
Team of Rivals: The Political Genius of Abraham Lincoln
Doris Kearns Goodwin
4.5/5 (234)
Fear: Trump in the White House
From Everand
Fear: Trump in the White House
Bob Woodward
3.5/5 (738)
A Heartbreaking Work Of Staggering Genius: A Memoir Based on a True Story
From Everand
A Heartbreaking Work Of Staggering Genius: A Memoir Based on a True Story
Dave Eggers
3.5/5 (231)
Rise of ISIS: A Threat We Can't Ignore
From Everand
Rise of ISIS: A Threat We Can't Ignore
Jay Sekulow
3.5/5 (137)
The Hard Thing About Hard Things: Building a Business When There Are No Easy Answers
From Everand
The Hard Thing About Hard Things: Building a Business When There Are No Easy Answers
Ben Horowitz
4.5/5 (345)
The World Is Flat 3.0: A Brief History of the Twenty-first Century
From Everand
The World Is Flat 3.0: A Brief History of the Twenty-first Century
Thomas L. Friedman
3.5/5 (2259)
The Emperor of All Maladies: A Biography of Cancer
From Everand
The Emperor of All Maladies: A Biography of Cancer
Siddhartha Mukherjee
4.5/5 (271)
Bad Feminist: Essays
From Everand
Bad Feminist: Essays
Roxane Gay
4/5 (1016)
Steve Jobs
From Everand
Steve Jobs
Walter Isaacson
4.5/5 (806)
John Adams
From Everand
John Adams
David McCullough
4.5/5 (2409)
Angela's Ashes: A Memoir
From Everand
Angela's Ashes: A Memoir
Frank McCourt
4.5/5 (440)
The Gifts of Imperfection: Let Go of Who You Think You're Supposed to Be and Embrace Who You Are
From Everand
The Gifts of Imperfection: Let Go of Who You Think You're Supposed to Be and Embrace Who You Are
Brene Brown
4/5 (1091)
The Unwinding: An Inner History of the New America
From Everand
The Unwinding: An Inner History of the New America
George Packer
4/5 (45)
The Glass Castle: A Memoir
From Everand
The Glass Castle: A Memoir
Jeannette Walls
4.5/5 (1716)
The Light Between Oceans: A Novel
From Everand
The Light Between Oceans: A Novel
M.L. Stedman
4.5/5 (789)
The Sympathizer: A Novel (Pulitzer Prize for Fiction)
From Everand
The Sympathizer: A Novel (Pulitzer Prize for Fiction)
Viet Thanh Nguyen
4.5/5 (122)
The Outsider: A Novel
From Everand
The Outsider: A Novel
Stephen King
4/5 (1850)
Brooklyn: A Novel
From Everand
Brooklyn: A Novel
Colm Toibin
3.5/5 (1946)
The Woman in Cabin 10
From Everand
The Woman in Cabin 10
Ruth Ware
3.5/5 (2520)
A Man Called Ove: A Novel
From Everand
A Man Called Ove: A Novel
Fredrik Backman
4.5/5 (4610)
The Art of Racing in the Rain: A Novel
From Everand
The Art of Racing in the Rain: A Novel
Garth Stein
4/5 (4203)
The Perks of Being a Wallflower
From Everand
The Perks of Being a Wallflower
Stephen Chbosky
4.5/5 (2104)
Manhattan Beach: A Novel
From Everand
Manhattan Beach: A Novel
Jennifer Egan
3.5/5 (792)
Wolf Hall: A Novel
From Everand
Wolf Hall: A Novel
Hilary Mantel
4/5 (3811)
Sing, Unburied, Sing: A Novel
From Everand
Sing, Unburied, Sing: A Novel
Jesmyn Ward
4/5 (1104)
Little Women
From Everand
Little Women
Louisa May Alcott
4/5 (104)
Her Body and Other Parties: Stories
From Everand
Her Body and Other Parties: Stories
Carmen Maria Machado
4/5 (821)
A Tree Grows in Brooklyn
From Everand
A Tree Grows in Brooklyn
Betty Smith
4.5/5 (1929)
The Constant Gardener: A Novel
From Everand
The Constant Gardener: A Novel
John le Carré
3.5/5 (104)
Footer menu
Back to top
About
About Scribd
Everand: Ebooks & Audiobooks
SlideShare
Press
Join our team!
Contact us
Invite friends
Support
Help / FAQ
Accessibility
Purchase help
AdChoices
Legal
Terms
Privacy
Copyright
Do not sell or share my personal information
Social
Instagram Instagram
Twitter Twitter
Facebook Facebook
Pinterest Pinterest
Get our free apps

About
About Scribd
Everand: Ebooks & Audiobooks
SlideShare
Press
Join our team!
Contact us
Invite friends
Legal
Terms
Privacy
Copyright
Do not sell or share my personal information
Support
Help / FAQ
Accessibility
Purchase help
AdChoices
Social
Instagram Instagram
Twitter Twitter
Facebook Facebook
Pinterest Pinterest
Get our free apps

Documents
Language:
English
English(selected)
Español
Português
Deutsch
Français
Русский
Italiano
Română
Bahasa Indonesia
Learn more
Copyright © 2024 Scribd Inc.
Language:
English
English(selected)
Español
Português
Deutsch
Français
Русский
Italiano
Română
Bahasa Indonesia
Learn more
Copyright © 2024 Scribd Inc.

Best HTML Notes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Best HTML Notes

Uploaded by

Copyright:

Available Formats

and