Scribd
Upload
5 views

HTML+Introduction

Uploaded by

reddyshadvalini
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

HTML+Introduction

Uploaded by

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

HTML

Beginners Guide to HTML


Browser
Chrome - used to render HTML pages.
https://www.google.com/chrome/

The browser is what interprets the code and shows it to


you. Used to hold HTML and styling with CSS and dynamic
content with JavaScript.

HTML (Hypertext Markup Language) is not a programming


language; it is a markup language used to tell your
browser how to structure the web pages you visit.
INSTRUCTOR:

LAURENCE SVEKIS
- Over 300 courses in technology and
web applications.
- 20 years of JavaScript web
programming experience
- 500,000+ students across multiple
platforms
- Digital instructor since 2002

READY TO HELP YOU LEARN and


ANSWER ANY questions you may
have.

Course instructor : Laurence Svekis @ https://www.udemy.com/user/lars51/


Editor
Text Editor - used to write code.
Brackets - http://brackets.io/

No download just a great place to try HTML,CSS and


JavaScript
https://codepen.io/

Others
https://jsfiddle.net/

http://jsbin.com
Resources
https://devdocs.io/dom/ - list of code syntax.
https://developer.mozilla.org/en-US/docs/Web - Examples
and syntax explanations.

MDN - References to HTML tags


https://developer.mozilla.org/en-US/docs/Web/HTML
Snapshot Website history - https://archive.org/web/

To view website source code on Chrome press Ctrl+U


Cmd+Opt+U

One of the first websites http://info.cern.ch/

HTML is backwards compatible


No styling which is introduced later
Purpose was to add some structure to plain text
What is an Element
Tag that wraps text and lets the browser know what to do
with it.
Chrome See the Code
View the HTML of a website

Right-click the page and look at the menu that appears.


From that menu, click View page source.
Opens the page with view-source: before the URL like
view-source:https://www.google.com/
Also Browser dev Tools click inspect. This will open the
developer console to the element that is selected. Try to
update some of the text on your favorite website. Don’t
worry only in the current instance and when you refresh
the page goes back.
HTML Basic Tags
<!DOCTYPE html> - lets browser know what doc type to
expect. <!DOCTYPE html>
<html> </html> - wraps HTML document <html>
<head> </head> - info not to be displayed.
<body> </body> - Visible portion of the document <head>
<title> </title> - Name of the document in the title bar <title>Title</title>
</head>
Tags can be placed within other tags to create tree structure
Every web page should have these 4 tags, will work without them <body> </body>
but to be proper they should be included.
</html>
Formatting Text and more
Spacing of text <div>Block Content </div> <span>Inline Content</span>
<p>Paragraph</p>
<p> </p> - Creates a paragraph <blockquote>BlockQuote</blockquote> Hello World
<br> - Line Break new line <br> <u>Underline</u> Hello World
<blockquote> </blockquote> - Indents as quote <br> <strike>Strike Text</strike> Hello World
<div> </div> - Block Content with CSS <br> <big>Big </big> Hello World
<span> </span> - Inline content with CSS <br> <small>Small</small> Hello World
<br> <acronym>Acronym</acronym> Hello World
Line Breaks <br> and <hr> are self closing tags <br> <q>Quoted</q> Hello World
Previously <br /> now the slash is not needed <br> <cite>Cite Text</cite> Hello World
<br> <code>Code</code> Hello World
Format your text to make it easier to read and structure so that
when you apply styling it is easier to select the blocks of content.
Text Tags and formatted Text
<h1></h1> - creates headline tags. Larger and bolded <b> Bold text </b> Hello World
text. h1 largest - h6 smallest. <br> <strong>Strong Text </strong> Hello World
<strong> </strong> <b></b> - bolds text <br> <i> - Italic text </i> Hello World
<em> </em> <i></i> - italicized text <br><em> - Emphasized text</em> Hello World
<tt> </tt> - typewriter style text <br>
<code> </code> - source code <mark> - Marked text </mark> Hello World
<cite> </cite> - Creates a citation <br> <small> - Small text</small> Hello World
<address> </address> - Creates address section <br> <del> - Deleted text</del> Hello World
<del></del> - Deleted text <br> <ins> - Inserted text</ins> Hello World
<ins></ins> - Inserted text <br> <sub> - Subscript text</sub> Hello World
<sub></sub> - Subscript text <br> <sup> - Superscript text</sup> Hello World
<sup></sup> - Superscript text

*head tags are good for SEO. Search rankings.


HTML Lists
<ul> </ul> - Creates an unordered list <dl> <dt>One</dt> <dt>One #2</dt>
<ol> </ol> - Ordered list <dd>Whatever you use to describe the item</dd>
<li> </li> - list item <dt>Two</dt>
<dl> </dl> - Definition list <dd>Whatever you use to describe the item</dd>
<dt></dt> - Definition term <dt>Three</dt>
<dd></dd> -Definition <dd>Whatever you use to describe the item</dd>
</dl>
Use lists to make content more readable <ol type="i" start="5">
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
</ol>
<ul style="list-style-type:lower-alpha ">
<li>List item #2</li>
<li>List item #3</li>
<li>List item #4</li>
</ul>
HTML Attributes
The HTML <a> element (or anchor element) creates a <html>
hyperlink to other web pages, files, locations within the <head>
same page, email addresses, or any other URL. <title>HTML</title>
<style>p { height: 500px; border: 1px solid ddd; }</style>
Attributes : Elements in HTML have attributes; these are </head>
additional values that configure the elements or adjust <body> <body> <a href="#one" title="Section 1">One</a>|
their behavior in various ways to meet the criteria the <a href="#two" title="Section 2">Two</a>| <a
users want. href="http://www.google.com" title="Google"
https://developer.mozilla.org/en-US/docs/Web/HTML/Att target="_blank">Three</a>
ributes <h1>1</h1>
<p id="one">Just some content here, nothing to see.</p>
● target = where to open the linked document <h1>2</h1>
● href = where the URL of the page the link goes to <p id="two">Just some content here, nothing to see.</p>
● title = Text to be displayed in a tooltip when <h1>3</h1>
hovering over the element. <p id="three">Just some content here, nothing to
see.</p>
Search engines use link text to index target files, so it is a good </body>
idea to include keywords in your link text to effectively describe </html>
what is being linked to
HTML Hyperlinks
Make it clickable. Hyperlinks are really important — they <html>
are what makes the Web a web.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Int <head>
roduction_to_HTML/Creating_hyperlinks <title>HTML</title>
</head>
absolute URL vs relative URL:
<body> <a href="about.html" title="About page">About</a>|
relative URL will point to different places depending on <a
the actual location of the file you refer from — for href="http://www.discoveryvip.com/Learn/JSON-Resources"
example if in index.html and you link to about.html needs title="Google" target="_blank">Website</a> </body>
to be in the same folder. Location matters.
</html>
absolute URL: Points to a location defined by its absolute
location on the web, including protocol and domain name.
https://www.discoveryvip.com/index.html will always be
the same end location.
Search engines use link text to index target files, so it is a good
idea to include keywords in your link text to effectively describe
what is being linked to
HTML Images
Placeholder images - https://placeholder.com/ <html>

<img src="https://via.placeholder.com/350x150"> <head>


<title>HTML</title>
The HTML <img> element embeds an image into the </head>
document.
<body> <img src="https://via.placeholder.com/350x150"
https://developer.mozilla.org/en-US/docs/Web/HTML/Ele alt="Just a placeholder image">
ment/img <a href="http://www.discoveryvip.com/" title="Google"
target="_blank"> <img
● src attribute is required, and contains the path to src="https://via.placeholder.com/350x150" alt="Image with
the image you want to embed. hyperlink"> </a>
● alt attribute holds a text description of the image, </body>
which isn't mandatory but is incredibly useful for
accessibility </html>
HTML Semantic Elements
https://developer.mozilla.org/en-US/docs/Web/Guide/HT <header id="header">Header for website</header>
ML/Using_HTML_sections_and_outlines <div id="main">
<nav>Menu
<article> <ul>
<aside> <li><a href="index.html">Home</a></li>
<footer> <li><a href="about.html">About</a></li>
<header> </ul>
<nav> </nav>
<section> <article>This is my main content of my
website</article>
Previously done with divs and adding attributes to the <aside>You can put some ads here.</aside>
elements. </div>
These are just like divs with meaningful names, they don’t <footer id="footer">Footer</footer>
do anything for the styling.
HTML Comments
<!-- A Comment → Comments can appear anywhere in a <body>
document, as the HTML parser is supposed to ignore them <!-- this is my website -->
no matter where they appear so long as they are not <header id="header">Header for website</header>
inside other HTML tag structures. Comments are <div id="main">
represented in HTML and XML as content between '<!--' <nav>Menu
and '-->' <ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
<article>This is my main content of my
website</article>
<aside>You can put some ads here.</aside>
</div>
<footer id="footer">Footer</footer>
</body>
</html>
Apply Styling
https://developer.mozilla.org/en-US/docs/Web/CSS/flex <html><head>
<title>Simple website</title>
<style>
The flex CSS property sets how a flex item will grow or header, footer { background: red; text-align: center; font-size:
shrink to fit the space available in its flex container. 2em;height: 15vh; }
#main {display: flex;min-height: 70vh; }
Select the element using the ID or by class or by tag name. article { flex: 5; }
nav, aside { flex: 1; background: #ddd; }
</style>
Apply styling </head>
<body>
<header id="header">Header for website</header>
<div id="main">
<nav>Menu
<ul><li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li> </ul></nav>
<article>This is my main content of my website</article>
Tip : play a game learn more about flex <aside>You can put some ads here.</aside>
https://flexboxfroggy.com/ </div>
<footer id="footer">Footer</footer>
</body></html>
Make a simple website
1. Create file index.html
2. Create a sample structure
3. Select the elements
4. Apply styling
5. Add content
Thank you for your support

If you have any questions or comments please let me


know. I’m always happy to hear from you!!!

Course instructor : Laurence Svekis -


providing online training to over
500,000 students across hundreds of
courses and many platforms.

Find out more about my courses at http://discoveryvip.com/

You might also like