HTML Learn HTML5 in 1 Hour Quick Learn Course Beginners https://www.udemy.com/course/html-learn-html5/
Create web pages with HTML
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.
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
220.127.116.11 = Google in Holtsville NY, United States
Check out the Code
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
Click the menu icon Menu on the browser toolbar.
Select More tools, then View Source.
Press Ctrl+U (Windows) (Control+U)
⌘-Option-U (Mac). (Command+Option+U)
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.
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.
Web Page Title
CONTENT GOES HERE
This is my website
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
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.
This is my website
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/
This is my website
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.
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
element represents a paragraph
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
Welcome to my page
Welcome to my page
Open https://devdocs.io/html-elements/ explore the heading tags. Update the h1 adding other heading elements.
Create a new paragraph and try the
Add a Horizontal Rule between your name and the content.
Make sure your index page looks like mine
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 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
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
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
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
You can add html characters to your HTML code. ☎ Contact ✓ Top Skills ☆Education EXERCISE :
Add some cool characters to your resume. HTML Tables
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
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
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!!!!
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