FREE HTML Guide +++ Free HTML Course

HTML Learn HTML5 in 1 Hour Quick Learn Course Beginners https://www.udemy.com/course/html-learn-html5/

HTML Introduction
Create web pages with HTML

INSTRUCTOR:
LAURENCE SVEKIS

Course instructor : Laurence Svekis

  • Over 300 courses in technology and web applications.
  • 20 years of web programming experience
  • 750,000+ students across multiple platforms
  • Digital instructor since 2002

READY TO HELP YOU LEARN and ANSWER ANY questions you may have.

How websites work
The internet is a connected network of computers, transferring info between each other.

IP address is the unique identifier of every computer that is connected, like a phone number helps to determine the path from one computer to another.

Computer which accesses the internet and requests information, your computer is known as the client

Computer which serves information and provides information to clients is the server.

EXERCISE :
Type in ‘what is my ip’ in search.
Go to https://dnschecker.org/ type in your favorite website. Copy the IP address and paste in the browser. Now you are connected to that server
172.217.12.142 = Google in Holtsville NY, United States

Check out the Code
We use browsers on our computers to interpret the HTML CSS and JavaScript code sent by the server.

Browsers run HTML CSS and JavaScript code. You can see this even if the file is on your computer and you are not connected to the internet.

Inspect the code – http://info.cern.ch/ first website! They needed a way to provide some page structure and send it across the network = birth of HTML

We need a way to write the code try codepen.io
https://codepen.io/pen/

Google Chrome
Click the menu icon Menu on the browser toolbar.
Select More tools, then View Source.
or
Press Ctrl+U (Windows) (Control+U)
⌘-Option-U (Mac). (Command+Option+U)

EXERCISE :
Go to your favorite website and check out the code.
Go to http://info.cern.ch/ get the source in the body and copy it to codepen pen.

Website boilerplate
4 tags every web page should have!
Tags can be nested in other tags to create tree like structure of hierarchy.
html head title body
DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications. Case-insensitively.
https://html.spec.whatwg.org/multipage/syntax.html#syntax-doctype



Web Page Title

CONTENT GOES HERE

Laurence Svekis

This is my website

EXERCISE :
Update your index file placing the existing content between the body tags. Create a new file called boilerplate.html with just the 4 elements needed for an html page.
Open the file using a browser

Browser no matter which one
HTML is the foundation of all websites
Websites can be with just HTML
Might no look right
HyperText Markup Language – All share common history
Markup is used by editors to let them know how the layout and structure
Codepen.io – try out html code
Plain text has no structure
HTMl lays out with Structure
Copy HTML structure
Largest heading H1
List items
When you open you should close them – apply structure

What are tags
HTML is content with tags that indicate the structure of that content. https://devdocs.io/html-elements/ – list of page elements (tags) .https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 mdn HTML guides.
Note that different tags have different display properties of the content.
This is structure that breaks the content into chunks that can then be output more meaningfully onto the page.

Laurence Svekis

This is my website

EXERCISE :
In codepen
Update the H1 tag with your name
Update the p tag with your message
Remove rest of html tags

Code Editor IDE
To create html files on your computer you need a code editor, and save the file with html as the extension.

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

Laurence Svekis

This is my website

EXERCISE :
Create a folder on your computer that you will use for this course. Connect the folder in the editor. Create a new file and save as index.html. This is your page starting point.
EXERCISE :
Copy the code from codepen or the http://info.cern.ch/ website source and paste it in your index.html file. Save the file. Open the file using your browser.

Tags Heading and Paragraphs line breaks
Get code examples from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements and https://devdocs.io/html/element/heading_elements
The HTML

element represents a paragraph
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p
The HTML
element produces a line break in text (carriage-return) notice no additional padding of the content. Horizontal Rule


Self Closing Tags

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6

Hello
Welcome to my page

Laurence Svekis


Hello
Welcome to my page

EXERCISE :
Open https://devdocs.io/html-elements/ explore the heading tags. Update the h1 adding other heading elements.
Create a new paragraph and try the
line break.
Add a Horizontal Rule between your name and the content.
Make sure your index page looks like mine

Text Formats
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i
Hello
Welcome to my page. This page is about Laurence Svekis. It’s going to list some important information about me. Creating HTML pages you probably think to yourself This can’t be real!. strong bold – bolds text
emphasized italicized – italicized text
typewriter – typewriter style text
source code – source code
citation – Creates a citation address section Creates address section
deleted – Deleted text
inserted – Inserted text
subscript – Subscript text
superscript – Superscript text
Small – smaller text
Big – Big text EXERCISE :
Update your introduction with different text formats. Use emphasis on words and other text formats. Content holders
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. Block Content with CSS
– Inline content with CSS





Header for website <div id="main"> Menu Home About This is my main content of my website You can put some ads here. </div> Footer Lists
Lists are a collection of list items nested within the list tag. 2 Types ordered and unordered.
Both contain list items
The HTML element is used to represent an item in a list. Creates an unordered list Ordered list
– list item Description lists Definition list
– Definition term
-Definition Skills HTML CSS JavaScript Favorite Animals Dogs Cats Horse One One #2 Whatever you use to describe the item Two Whatever you use to describe the item Three Whatever you use to describe the item EXERCISE :
Using the h2 add a title to the list, list out some of your skills in an unordered list and your favorite animals in an ordered list. Comments and meta
Stuff you don’t see
Comments help you and others understand your code increases code readability and good practice to add comments ‘ Meta information
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
This attribute declares the page’s character encoding.

Web Page Title Laurence Svekis Hello
Welcome to my page. This page is about Laurence Svekis. EXERCISE :
Update adding comments for planning of what you want to add to your website. Add some comments. Hyperlinks
The HTML element (or anchor element) creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes target = where to open the linked document
href = where the URL of the page the link goes to
title = Text to be displayed in a tooltip when hovering over the element.
Social Profiles
Twitter Profile Linkedin Profile EXERCISE :
Create Hyperlinks to your social profiles. Link out with target blank. Hyperlinks
absolute URL vs relative URL: relative URL will point to different places depending on the actual location of the file you refer from — for example if in index.html and you link to about.html needs to be in the same folder. Location matters. 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.
Contact Send Email Contact Me
EXERCISE :
Create second html page called contact and link to it. Within the contact page add a mailto link to your email. Images
Placeholder images – https://placeholder.com/ The HTML element embeds an image into the document. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img src attribute is required, and contains the path to the image you want to embed.
alt attribute holds a text description of the image, which isn’t mandatory but is incredibly useful for accessibility EXERCISE :
Locate your image from a social media profile and add it to your html. HTML Character Codes
https://dev.w3.org/html5/html-author/charref
You can add html characters to your HTML code. ☎ Contact ✓ Top Skills ☆Education EXERCISE :
Add some cool characters to your resume. HTML Tables
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
The HTML element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data. The table header The table body with two columns EXERCISE :
Add a table to contain your Content HTML Element Attributes
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
Name Major Year University of Web Development Canada 2001-2006 HTML school Canada 1995-1999 EXERCISE :
Add some inline style attributes to your elements Signing up at GitHub
https://github.com/join Free Plan
GitHub basics for every developer
Unlimited repositories
3 collaborators/private repository
2,000 Action minutes/month
500MB of GitHub Packages storage
Automated security updates EXERCISE :
Github account/login to the account Start a Project
https://github.com/new EXERCISE :
Create new project with name
Open in GitHub
Edit readme to state what the project is for Share your site to the world
Under settings go to GitHub Pages. EXERCISE :
Under settings select the branch you want to share.
Get URL in GitHub pages section and try in a browser Example Source Code


Web Page Title
Laurence Svekis You found me online!!!!

⧃ About
I enjoy creating online content.
Welcome to my page. This page is about Laurence Svekis.
⨀ Social Profiles Twitter Profile Linkedin Profile ✓ Top Skills HTML code Web Page Design
☆Education Name Major Year University of Web Development Canada 2001-2006
☎ Contact Contact Me
Send Email Congratulations on completing the course! Thank you for your support
Course instructor : Laurence Svekis – providing online training to over 750,000 students across hundreds of courses and many platforms.
Find out more about my courses at DiscoveryVIP

Leave a Comment