Web Design - Modern HTML and CSS for creating Web Pages | Laurence Svekis | Skillshare

Web Design - Modern HTML and CSS for creating Web Pages

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
86 Lessons (9h 13m)
    • 1. Introduction to HTML and CSS for Web Design

      3:17
    • 2. 1 HTML Setup Get Coding

      6:07
    • 3. 2 Writing Code

      7:09
    • 4. 1 HTML Setup Get Coding

      6:07
    • 5. 2 Create a HTML Template

      6:15
    • 6. 3 What is an Element

      5:46
    • 7. 4 Headings and Bolded Text

      7:01
    • 8. 5 Apply HTML Tags Exercise 1

      5:28
    • 9. 6 Text Formats HTML

      10:02
    • 10. 7 HTML comments

      2:35
    • 11. 8 HTML HyperLinks Anchor

      9:51
    • 12. 9 Apply HTML Tags Exercise 2

      7:12
    • 13. 10 MailTo send Email

      2:57
    • 14. 11 Image Tags in HTML

      6:36
    • 15. 11 5 Social Profile Linking Exercise 3

      4:27
    • 16. 12 HTMl Lists UL OL DL

      6:44
    • 17. 13 HTML Tables

      8:55
    • 18. 14 Back In Time Challenge 4

      11:10
    • 19. 15 HTML Block and Inline Elements

      3:48
    • 20. 16 HTML5 Semantic Elements

      6:39
    • 21. 17 Get On GitPages

      3:50
    • 22. 18 Challenge 6 Live Resume

      7:34
    • 23. 19 HTML Forms

      8:46
    • 24. 20 HTML Forms 2

      8:33
    • 25. 21 Form Field Options

      16:02
    • 26. 22 FieldSet and Forms

      1:23
    • 27. -23 iframes HTML

      6:47
    • 28. 24 Audio and Video Tags

      4:17
    • 29. 25 HTML Meta Tags

      5:44
    • 30. 26 Common Tags with Source Files

      5:03
    • 31. 27 Debugging HTML

      5:26
    • 32. Introduction to CSS

      2:03
    • 33. 1 What is CSS

      4:02
    • 34. 2 CSS Syntax

      3:48
    • 35. 3 Writing CSS

      11:54
    • 36. 4 Comments CSS

      2:21
    • 37. 5 CSS selectors

      4:56
    • 38. 6 CSS Color Units

      12:11
    • 39. 7 CSS color Background Challenge

      4:54
    • 40. 8 CSS Background Images

      12:13
    • 41. 9 Background Size

      5:11
    • 42. 10 Height and Width

      7:12
    • 43. 11 Chrome DevTools

      5:20
    • 44. 12 CSS Units

      3:41
    • 45. 13 CSS Borders

      11:33
    • 46. 14 Margin and Padding CSS

      9:02
    • 47. 15 CSS Padding

      8:45
    • 48. 16 Box Model

      3:59
    • 49. 17 CSS Outline

      3:08
    • 50. 18 Pseudo Classes CSS

      8:00
    • 51. 19 Pseudo Elements CSS

      7:13
    • 52. 20 Fun Fonts CSS

      5:01
    • 53. 21 Google Fonts CSS

      4:06
    • 54. 22 Font Awesome CSS

      2:52
    • 55. 23 Text and more font CSS

      7:48
    • 56. 24 CSS Display Property

      9:45
    • 57. 25 NavBar Maker Exercise

      5:49
    • 58. 26 CSS Position

      9:15
    • 59. 27 z Index CSS

      1:41
    • 60. 28 Overflow of Element Content

      3:30
    • 61. 28 1 Project Website SideBar Nav

      11:30
    • 62. 29 Float Elements CSS

      5:13
    • 63. 30 Use Floats for Web Template

      9:02
    • 64. 31 Image Gallery with Floats

      8:29
    • 65. 32 Mouse Cursor Changes

      1:58
    • 66. 33 Advanced Selectors

      8:33
    • 67. 34 Media CSS

      5:33
    • 68. 35 CSS selector specificity

      6:05
    • 69. Advanced CSS Introduction Lesson

      1:08
    • 70. 1 CSS Linear Gradients

      7:03
    • 71. 2 CSS Radial Gradients

      7:05
    • 72. 3 CSS 2D Transforms

      9:09
    • 73. 4 CSS 3D Transforms

      4:39
    • 74. 5 CSS Animations

      6:03
    • 75. CSS Layouts Introduction Lesson

      1:54
    • 76. -1 FlexBox Layout

      3:52
    • 77. -2 Flex NavBar Challenge

      5:34
    • 78. 3 Sizing with Flexbox

      7:54
    • 79. 4 Flex items Size

      8:02
    • 80. 5 Flex Image Gallery Challenge

      7:59
    • 81. 6 Grid Layout

      3:40
    • 82. 7 Grid Rows and Columns

      4:54
    • 83. 8 Grid Rows and Columns Width

      6:47
    • 84. 9 Grid Items CSS

      7:50
    • 85. 10 Grid Area Names

      5:53
    • 86. 11 WebSite Examples

      14:43

About This Class

Create Responsive modern Websites with CSS and HTML - Apply Flexbox and CSS Grid

HTML5 and CSS3 included..... 

Over 12 Coding Challenges - To get you Coding Quickly

**** SOURCE CODE INCLUDED FOR ALL LESSONS OVER 100 FILES ****

Web Design with HTML CSS How to create Web Pages web development build websites create WebSites from scratch

Explore the core technologies of the web learn how you can get started with Web development.

Coding for beginners to learn more about web design and web development. Learn HTML5 CSS3 . Modern coding is explained loaded with examples and sample code. Website development building blocks learn to code. Make it Responsive learn responsive web design with how to create a website responsive and more. Perfect course for html and css for beginners.

Real world Coding with HTML CSS 

HTML elements are the building blocks of HTML pages. HTML5 is the starting technology for anything online - perfect to get started as a web designer and web developer.

Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser.

Course Covers HTML for Beginners-

  • HTML and HTML5 for modern website Design and Development.

  • Learn about modern HTML elements

  • Basic of HTML elements and how they work

  • Debugging HTML and Comments within code

  • Create HyperLinks and Links to page content and other web pages anchor tag

  • Bold and Headings to make content stand out with HTML

  • Coding Challenge - Tags Exercise

  • Coding Challenge - Apply HTML tags create Page Structure - Mini Website Creation exercise.

  • Adding MailTo to send emails with HTML links

  • Images within HTML adding img tag and source options

  • Coding Challenge - Getting social linking to your social profiles coding exercise with HTML tags.

  • How to create lists with HTML tags.

  • Adding tables with HTML table tag element attribute options.

  • Coding Challenge - Create an achieved old school website from scratch. Simple HTML website Challenge exercise .

  • Semantic elements and blocks and spans with HTML

  • Coding Challenge - Resume upload Challenge - create your Resume and upload to the web.

  • Explore how to create HTML forms form tags and form elements.

  • Different text formatting options with HTML tags

  • Using IFrames in HTML code
    What are HTML Meta tags and what HTML meta tags should be used HTML Meta Tags
    HTML and Audio options Playing Sound Audio and Video Tags

  • Adding Audio and Video to play within HTML tags

Find out more about CSS What is CSS and how it works. Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript

Course Covers CSS for Beginners-

  • How to write CSS adding CSS to web pages and CSS Syntax

  • How to comment CSS code ways to apply Comments CSS

  • What are CSS selectors and how to use CSS selectors to get page elements

  • Setting colors different CSS Color Units Listed

  • Coding Challenge CSS - CSS color Background Challenge

  • Setting CSS background properties and values

  • How to set Element Height and Width with CSS

  • How to Use Chrome DevTools

  • How to add and create CSS Borders

  • How to apply Margin with CSS to elements on the web page

  • CSS Padding options - setting padding top bottom left and right for an element.

  • What is the Box Model and how it works in CSS - Border - Padding - Margin

  • Examples of Pseudo Classes CSS and what are CSS Pseudo Classes

  • What are Pseudo Elements CSS - how to write CSS code for Pseudo Elements

  • Adding Font Styles - selecting web fonts and updating font-family Fun Fonts CSS

  • How to add Google Fonts to your website using Google Fonts CSS

  • How to use the CSS Display Property setting values

  • Coding Challenge - Make a Navigation bar turn your html list items into a NavBar - NavBar Maker Exercise

  • How to set CSS Position - position property options for values

  • How to set CSS Float Elements CSS

  • Coding Challenge - 3 Column Website Project using Floats create a website from HTML code apply styling to create a three column standard website

  • Coding Challenge - Create a Website Image Gallery Website Using Floats - create website from scratch

  • Update Mouse Cursor pointer with CSS - Mouse Cursor Changes

  • How to Use CSS Advanced Selectors and more selection options

  • CSS selector specificity how CSS selector specificity works.

  • How to Create CSS Linear Gradients and How to Create CSS Radial Gradients

  • How to create CSS 2D Transforms and CSS 3D Transforms

  • How to make animations with CSS - CSS Animations

  • What is CSS FlexBox Layout how to create a layout with Flexbox

  • Coding Challenge - How to create a NavBar using Flexbox - Flex NavBar Challenge

  • How to apply element Sizing with Flexbox.

  • How to use Flexbox to size items on the page- Flex items Size

  • Coding Challenge - Flex Image Gallery Challenge - Create an image gallery web page using Flexbox applying CSS to position elements

  • Introduction to the CSS Grid Layout - creating websites with Grid Layout

  • How to use CSS Grid to make Rows and Columns

  • What are Grid Items CSS Grid lesson

  • Setting CSS Grid Area Names and more

  • Coding Challenge -creating websites using CSS Grid - setup and design web pages with examples of CSS Grid webpages.

1c8f8190

Transcripts

1. Introduction to HTML and CSS for Web Design: hi there. And welcome to the complete Web design course to get you started with HTML and CSS. My name is Lawrence, and I'm gonna be instructor for this course I come to with many years of Web development experience and over the past five years I've had the opportunity teach countless students how to create websites from scratch, all using HTML, CSS and JavaScript. In the upcoming lessons, I'm gonna be showing you and walking you through all of the core fundamentals of writing. HTML. How you can get started. How you can start rating html directly on your computer and then save those files, render them out within the browser and see what they look like. You can learn more about Web design and Web development, the ultimate starting point for learning the core technologies that powers the Web. HTML and CSS are at the very heart of it. HTML provides the structure. CSS provides the presentation and the styling of how the websites look. This is gonna be a course about modern website design showing you html five CSS three. All the tips resources, modern coding is explained from scratch. Each lesson is comprised of different learning objectives that are outlined within the lesson, presenting you how to write the coding syntax and then challenging you to take what you've learned in that lesson, try it for yourself. You can also submit projects and the best thing about HTML and CSS. It allows you to let your creativity take charge. The source code is also included, and one of the best ways to learn is to get coding, try it out for yourself and see what happens. This is really a world coding with HTML and CSS. I do suggest that at the end of each lesson, you take the code, try it out for yourself and submit a project within each lesson. You have an opportunity to select the project as well as all of the resources are also listed. So go ahead and create a project for the lesson. Share your code is simply select. Create a project, and that's going to give you an opportunity to share your work with us. And there's several options to share your work to either upload an image of your project, so provide a screen capture of the current project that you've created with the code. The output of the code. You can also add in a video and linked to the code as well within Get hub and I am going to be showing you mawr get hub throughout the lessons. So give ah title of your project. And this could also be the lesson number as well as the syntax that you're gonna be writing . And sharing about this could provide me an opportunity to provide you some valuable feedback for how you're doing within the lessons, and each lesson is an opportunity to select and provide a project. I do have challenges within the lessons and within those challenges, and I strongly recommend to, in order to get the most out of the content, to submit those as projects within the course. Submitting a project is gonna provide me an opportunity to review your work, comment on your progress and really help you learn. So I know you're excited to get started, so let's dive right in and start creating some amazing looking Web pages from scratch using HTML and CSS 2. 1 HTML Setup Get Coding: Hey, welcome. We're gonna be introducing you to how the Internet works, How you can check your DNS and as well as how you can start writing some code. This is got gonna be packed with in this first lesson, we're gonna go through rather quickly. So first of all, when you come to the Internet, you access the Internet through your browser, and when you go in your browser, you can either enter in a search term or you can enter in a Web address. So that Web address that I'm looking for is going to be google dot c A. And that's gonna be bringing me to this first page, this Google page. So what's happening behind the scenes when I open up my Web browser? Then it's connecting to my Internet service provider, taking this Web address, finding out what the I P address is that's related to it connecting to the server that contains the information. And then that server is sending the files back to my Internet service provider and then ultimately back to my browser and you can find out what DNS is. So DNS is the I P address and an I P address is a unique address that every computer has that allows it to connect to the Internet. So think of it like a phone number or a phone directory, where one computer connect can connect to another computer via the I P address. And that's how they can locate what computer it is that we're trying to get files from, and also the computer that's trying to receive the files so you can find out the DNS of google dot c A. And once you get the I P address, so you get a number of I P addresses, return back. And this is something. It's typical for some of the larger websites that might have multiple servers that are hosting up the files. And for most of smaller websites, they only do have the one server. So just going to get that one i p address being returned back. There's another website that we're gonna be looking at is info cern dot ch. So if you want to see what the I P address of this server is that you can find out by clicking that and it's gonna return back the I P address, and so there's the one i p address for that server so good. And try it out with your favorite website. Get the I P address of that website and then you can also grab the I P address and type it or put it directly within your browser and you're gonna find that you're getting the same website being returned back because this is the same thing that the server is returning back to just sieving them that trip. And I'm gonna try that with the one other website that we have. It's providing the connection to the server that we're looking for. We also find that it doesn't always translate exactly just by getting the I p address a lot of times that the domains will have their own routing within their DNS. And that's why this one didn't work exactly. So also keep that in mind that it's connecting to the server and the server is the one that knows where the files are located. The server sends back the file contents. Your browser interprets those file contents and renders it out for you visibly and on this website. It's fairly basic website, and it's actually the home of the first website. It's got some basic HTML structuring and that's what we're actually looking at this website because we want to take a closer look at the HTML off the website and to find out html of the website, you can open up the source code, so I'm using Chrome Browser by Amano Max by pressing control and anywhere where it's blank and as well on Windows Machine, you can right click and from there you've got the little pop up window that pops up and you've got an option to view source code page source. So go ahead and click that and that's going to open up another window that's going to display the HTML content. So here we have set of HTML tags, head opening and closing, body opening and closing. And then there's also the title content and the header information that's contained within their. Just from looking at this, you can begin to see some structure within the HTML tax that they have opening and closing , and then some tags are also nested within other tags. And that's got some basic structuring as well that distinguishes between the various text and the text areas on the page so going over to the source code that's going to give us some basic source code to start with in order to illustrate mawr of what this code does and how it works. So for now, you can go and you can just simply do a copy and paste. So I'm gonna do copy of the code. There's a nice website called Code Pen i O. And this is where you can rate html CSS and JavaScript code directly within the Web page. And you don't need to set up an account of the you can and all of these air gonna be public eso within the HTML section. You can drop in some HTML code and you're going to see it gets rendered out on the right hand side, same way that we see it being presented on the Web page. That's essentially how HTML code works is it gives us the ability to you, render out the code and provide a little bit of structure to the code. And when we add styling, what the styling will do is this will allow us to update various colors, So if want to select the paragraph and that will update the color of the selected element. And then the JavaScript can be also be added in here as well, and this will create that interaction within the Web content. So we've covered quite a bit, and we're gonna be going over the HTML tags and more detail as we progress through the lessons. So for now and before the next lesson, go over to DNS checker, get the address of your wet favorite website, see the source code of your favorite website and also check out info dot cern dot ch. Take the source code from info dot certain dot ch. Copy it, paste it into code pen and check out tryout. Makes some updates to some of the wording. Don't update any of the tags, but updates some of the wording so you can get a feel for what the HTML tags air doing. And we're gonna be going over those in the next lesson. 3. 2 Writing Code: Hey, in the last lesson, we introduced you to code pen. And this is a great way to write code if you do have an Internet connection and you can practice writing some HTML as well as CSS and JavaScript directly within your browser now, if you are developing code, Ideally, you do have an editor right on your system that could do the same. And then you can run front and code directly within your browser, as we saw from our last lesson. Coates is a number of different editors in an editor. So what it is, it allows us to write code. So just as we saw with code Pen and editor, allow us to type the code, save it as a file on our local computer, and then afterwards we would upload those those files to a server, and then that way they would be accessible on the Internet. There's a number of different editors and the editor that I'm gonna be using Enough coming lessons is brackets, and you do have quite a bit of choice with the various editors, so you can choose whichever one you're most familiar with or comfortable with. Or you could you choose to use the same one that I'm using. So is three of the most popular open source editors. So there's brackets. There's also Adam I. O. And there's also visual studio code says Free editor from Microsoft. Brackets is an adobe product. At the end of the day, the rating front end code. You get also used text editors that might be already on your computer, such as text pad or note pad, and saving a file as an HTML file. That's all it takes, and that's all you need to do. And then opening up that HTML file within the browser will render the HTML code directly with in your browser. They're gonna be using brackets. So go ahead and to do the install of brackets, such as downloading brackets here. And once it's ready, you can do a head and do the install of bracket, and I'll give you a quick run through of brackets are gonna open up my version of brackets . So once you've downloaded, I am on a Mac. So that's what's downloading the D M G version. And there are Windows versions as well as Lennix versions across all three different editors that we've just been talking about. And once we've downloaded it and I'm gonna be replacing my existing one because this is an updated version. And there's also a listing of the popular extensions that are used with brackets, and one of my favorite ones is the beautify extension. So show you how you can install extensions as well, and there's a lot of different new extensions coming out all the time. Ah, full list from them is available here and as well as the popular ones that are get getting downloaded. And there's also different themes that you can use for the coding themes. And these air just the colors. That code is displayed with them. Now there are some benefits to using a code editor, as opposed to just a regular text editor like Note pad. So no pad doesn't wouldn't have all of the features that would highlight the various code in the syntax. With the editor's like brackets, you get quite a lot of functionality included, and in order to set up the various extensions in brackets, you could go to file and there's extension manager and then within extension manager. You can easily search and select different extensions to install. There's also the default ones that get installed. And if you want to search up, beautify, it will give you a listing all the extensions to install them. You just click install, and that does the installation of the extensions. You can see the extensions that are already installed by going under installed. And once you open it up, also select a folder that you're going to be using. The folder that I'm using is called Web Deaf. So I just opened up that folder, and I don't have any files in there as of yet. So any of the files that are gonna be written are gonna be written within this folder that's sitting on my computer, and you can also navigate to different folders. And I do suggest that as you create different Web projects that you create separate folders for them so you don't have overlapping file contents, and then once you're ready to create a file, they're going up to the top hit new to create a brand you file. And then once you create the file date way down the bottom right hand site, there's an option to change with the different languages. So what this will do is this will highlight the various tax. So I'm gonna just do an HTML tag with hello world and each one close that tag. And then if we update it from text to HTML, it will highlight the tags as well as the contents were able to distinguish between each demo tagging as well as the content. And this is one of the nice things. But using an editor is that you can really easily read the code that you're writing, and then we'll just save this file as index dot html and this will be our starting file that we can work with in order to start writing code on our computer. All minimize this going over to the same code that we had within code pen. I got a select that where you could just go to the view source of of info dot cern dot ch and paste the code into the index dot html. Now go over to your file browser on your computer, navigate to where you're navigate to where the file is located on your system. So this is that same index file that I haven't brought brackets and you can select to open it with and selected option and just use cruel in order. Open the file. So this is the file that we just created. And this is the one that sitting within my own system and you can notice as well with the file path as this is sharing a local file path. So this is just rendering out the file wherever it's located on my computer, and I have it under users Web sights and then within a folder called Web Dev. And that's where I got the index dot html. So now any changes I make to the file, then going back up and save and open that and then just do a quick refresh, and you can see that now that file has changed with my new updated content and then also as well. You can take a look at the source code, and this is the source code that is being used by the browser in order to render that content. So before the next lesson, go ahead and select an editor that you want to use. You can also try out some of the themes and extensions installed them within the editor and then take some of the source code from the cern dot ch website or any of your favorite websites. The copy and paste it into your editor. Create a file called index dot html, as well as create a folder that you're gonna be able to work out of and create files out of , Then open up, navigate to where the file is located. Open it up within your Web browser, see the code being rendered out, and then make some updates to some of the content. Not any of the tags, just the content of the page and see the changes take place. And don't forget to refresh the page in order to see the changes, and you could be ready to move on to the next lesson. 4. 1 HTML Setup Get Coding: Hey, welcome. We're gonna be introducing you to how the Internet works, How you can check your DNS and as well as how you can start writing some code. This is got gonna be packed with in this first lesson, we're gonna go through rather quickly. So first of all, when you come to the Internet, you access the Internet through your browser, and when you go in your browser, you can either enter in a search term or you can enter in a Web address. So that Web address that I'm looking for is going to be google dot c A. And that's gonna be bringing me to this first page, this Google page. So what's happening behind the scenes when I open up my Web browser? Then it's connecting to my Internet service provider, taking this Web address, finding out what the I P address is that's related to it connecting to the server that contains the information. And then that server is sending the files back to my Internet service provider and then ultimately back to my browser and you can find out what DNS is. So DNS is the I P address and an I P address is a unique address that every computer has that allows it to connect to the Internet. So think of it like a phone number or a phone directory, where one computer connect can connect to another computer via the I P address. And that's how they can locate what computer it is that we're trying to get files from, and also the computer that's trying to receive the files so you can find out the DNs of google dot c A. And once you get the I P address, so you get a number of I P addresses, return back. And this is something. It's typical for some of the larger websites that might have multiple servers that are hosting up the files. And for most of smaller websites, they only do have the one server. So just going to get that one i p address being returned back. There's another website that we're gonna be looking at is info cern dot ch. So if you want to see what the I P address of this server is that you can find out by clicking that and it's gonna return back the I P address, and so there's the one i p address for that server so good. And try it out with your favorite website. Get the I P address of that website and then you can also grab the I P address and type it or put it directly within your browser and you're gonna find that you're getting the same website being returned back because this is the same thing that the server is returning back to just sieving them that trip. And I'm gonna try that with the one other website that we have. It's providing the connection to the server that we're looking for. We also find that it doesn't always translate exactly just by getting the I p address a lot of times that the domains will have their own routing within their DNs. And that's why this one didn't work exactly. So also keep that in mind that it's connecting to the server and the server is the one that knows where the files are located. The server sends back the file contents. Your browser interprets those file contents and renders it out for you visibly and on this website. It's fairly basic website, and it's actually the home of the first website. It's got some basic HTML structuring and that's what we're actually looking at this website because we want to take a closer look at the HTML off the website and to find out html of the website, you can open up the source code, so I'm using Chrome Browser by Amano Max by pressing control and anywhere where it's blank and as well on Windows Machine, you can right click and from there you've got the little pop up window that pops up and you've got an option to view source code page source. So go ahead and click that and that's going to open up another window that's going to display the HTML content. So here we have set of HTML tags, head opening and closing, body opening and closing. And then there's also the title content and the header information that's contained within their. Just from looking at this, you can begin to see some structure within the HTML tax that they have opening and closing , and then some tags are also nested within other tags. And that's got some basic structuring as well that distinguishes between the various text and the text areas on the page so going over to the source code that's going to give us some basic source code to start with in order to illustrate mawr of what this code does and how it works. So for now, you can go and you can just simply do a copy and paste. So I'm gonna do copy of the code. There's a nice website called Code Pen i O. And this is where you can rate html CSS and JavaScript code directly within the Web page. And you don't need to set up an account of the you can and all of these air gonna be public eso within the HTML section. You can drop in some HTML code and you're going to see it gets rendered out on the right hand side, same way that we see it being presented on the Web page. That's essentially how HTML code works is it gives us the ability to you, render out the code and provide a little bit of structure to the code. And when we add styling, what the styling will do is this will allow us to update various colors, So if want to select the paragraph and that will update the color of the selected element. And then the JavaScript can be also be added in here as well, and this will create that interaction within the Web content. So we've covered quite a bit, and we're gonna be going over the HTML tags and more detail as we progress through the lessons. So for now and before the next lesson, go over to DNS checker, get the address of your wet favorite website, see the source code of your favorite website and also check out info dot cern dot ch. Take the source code from info dot certain dot ch. Copy it, paste it into code pen and check out tryout. Makes some updates to some of the wording. Don't update any of the tags, but updates some of the wording so you can get a feel for what the HTML tags air doing. And we're gonna be going over those in the next lesson. 5. 2 Create a HTML Template: Hey, welcome back in this lesson. We're gonna be going over on creating a basic HTML template that you can use for any websites. We're going to start by indicating the doc type. So I've created a blank html index dot html page, just a regular blank HTML page, and then we're going to render this out in the browser. So we started by indicating the doc type So you can see that if you go to the source code of any website right at the top, it indicates the doc type. So this is a requirement. And what this does in the sole purpose is to prevent the browser from switching to a different mode so that it understands what type of content and what type of document it's rendering out. So it doesn't have to guess, depending on the content. And if you don't include it, then the browser will Guests try to determine what type of content you're trying to render out. So going back into our html page index dot html, let's start set the doc type and some cases you're going to see this is upper case or lower case. It doesn't actually matter this is gonna be not case sensitive, so you can write it either way. But commonly the way that I usually will do it is I'll do upper case for the doc type and then html will be lower case. So that will specify that this is doc type HTML and you can see that in pretty much any website should have that. And I know the CERN website did not have that in the top. And this was, ah, more recent addition because remember, this website was created way, way back, So going into the dock type html. So we're specifying that this is gonna be a HTML document and there's actually four required types of tags for HTML, and that's going to be the main parent HTML opening and closing. And this is brackets that's automatically closing my HTML tanks. A good thing to turn on in if you do have it within your editor always gonna be closing off the tags. And that's one of the things that you always have to remember when you open a tag and then you need to close it off so that the properties get applied to the content that's contained within their. So if you don't close it off, then if you start another tag than couldn't get messed up. So always make sure that your opening and closing the tags and any of the content that's contained within here is gonna. Any of the nested tags are going to get this structure as well. Within an HTML document, the first tag is indicating where the HTML starts, and the next tag is indicating where the HTML ends. So going into the source code, we have our HTML and they have a lot of tax here and then the closing tigers as well. Html. So that structure is in place in all the websites that are properly structured with each to Mel, and then the next element that is required is the head tag. So within the head, this is where you would place all of the content. It's the main container for information that is in regards to the HTML document. So let's create the head and any of that meta information and information that the browser needs. So this isn't information that is seen by the user visiting the website. This is where all of the links to the matter properties, and we'll talk about that as well and linking to other external files images for icons and so on. So this is all contained within the head, and the next is the body type, and the body tag is where all of the contents are going to go. So this is where all of the main content is going to be for your user to be able to see it . So now that we've created this website, let's refresh and we see that always see his main content. And that's right, because the rest of them are HTML tags. We also do need tohave one mawr tag Teoh make the four must have tax foreign html document and that's gonna be the title tag. So what the title does is it allows you to see this information up here within the tab and as well, it's very useful for S e o purposes for search engine optimization and as well in order to reference what this page is about. So you should always each page should have a title and as well it should be unique for s e o purposes. So basically a summary or a quick few words summary about what this page is gonna be all about. So creating the title in the title as well sits in, and it's nested within the head tags because this isn't meant to be displayed within the content area. It's simply being displayed in most browsers within the top taps HTML course. So when I refresh it, pay attention to the tab browser. And since there was no title, it was just giving the file name. So it's doing index dot html, and when I refresh it, we have HTML course. And then, of course, we have the main content, and that's it. This is gonna be the four tags that you need to include and ever html document. And of course, without them it's still gonna render it that mean content. But it won't have the proper context that this isn't html document, so you won't have the proper structure. So you should be including these within all of your HTML documents. It should be all the same, so you could use this as a template to copy and paste it and create additional HTML pages by using this template and then update in the content and of course, the title. So the HTML is the root element, so all the other elements are contained within it. So they're all nested within the HTML and it the limits, the beginning of where the HTML code is going to go. The head is going to be the container for information about the HTML document, such as title and other meta information. And then the body is the display able content of the HTML document. And this way, whenever you look at an HTML document, you have some context and some idea of the structure that this is going to be presented to the user. So now it's your turn. Go ahead and create your HTML template document, and you're gonna be using this and reusing it over and over again throughout the lessons of this course and throughout the upcoming lessons. So create that, and you're gonna be ready to move on to the next lesson. 6. 3 What is an Element: this lesson, we're gonna be looking at what an element is and the properties of an element. So we created a basic HTML template. So once again, open up the editor and create that template. So including the HTML opening and closing tax, the head opening and closing include a title and then, in addition, include the body content. And for this body, we're gonna create a paragraphs. We're gonna wrap a paragraph tag around the main content of the body. I will take a closer look at what gets displayed its immediately when we refresh the page. The main content moved down and it got a little bit of content structure. And this is all coming from the paragraph type. So it's got a starting and a closing Koch that's got start tag, end tag. And then what's in the middle is what's called the content. So this is content and starting an old closing tags and then the whole thing altogether. This is what's known as an element within the structure. There's also attributes that can be added into elements, and we are going to be looking at some of the elements that are going to contain attributes differs classes that we can have foreign element. This is the attribute name, and this is the value off the attribute, and what attributes do is they allow us to provide more of information for the element that is wrapping around the content. And when you do look at most typical Web pages and I'm just gonna do the inspect view source code, you can see there's quite a few elements that will have attributes various attributes that are contained within their. So the classes allow us to apply styling some elements, such as the hyper links. They do have an H ref, which is a required attributes for that element, and we are going to be looking at this in more detail as we go through the upcoming lessons . But for now, it's important to understand that some elements do require these attributes and you can have a number of attributes per element. Also, when you look at buttons, so again, different types also accessibility attributes that apply accessibility features that are read by screen meters such as Ariel label within the source code and I may commit this bigger inputs. They have a number of attributes that are being added in you're not actually limit. There's a number of attributes you could add as many as are needed. And then these are all elements. So even the entire parent elements starting and closing. This is one element, and an element can have additional elements that are contained within side of that mean parent element. These air the Children of the parent element. There's also what's known as self closing tags. So these air tags that don't have an opening and closing and they provide some type of structure for the Web page. We've got ones like the BR, which produces a line break, and essentially, this is a carriage return. It provides additional formatting for the content as it's being laid out. So take a closer look at so opening up. We've got our main content and we'll just start right some content and ad in a line break. Also, there's ah, horizontal rule line breaks are different than paragraphs as the paragraph is going to be adding in margins as opposed to the line breaks which are just adding in the next line, and you can have line breaks that are contained within paragraphs so you can add that additional structure for those elements. Let's take a closer look at what we've got now in the output coming from the browser and looking at the output. So this attributes of class food, because we haven't applied any styling, it's not really doing anything yet to the content. There's also a style attributes, which allows us to apply styling directly for the element. And I'm gonna just use one that's called Color Red, so this will turn the content red, so this allows us to play styling directly within the element. There's also hello world, and then we've got a line break and notice that it does this differentiate between the paragraphs because this is just providing that carriage return. The HR provides the horizontal rule, so that goes all the way across the page. And then we've got a couple more paragraphs. Notice the margins around those paragraphs, and then down here, we've got a paragraph with a line break that's contained within the middle. So now it's up to you. Go ahead and open up the editor, create a paragraph and also create ah line break and a horizontal rule, and you can also do combinations of them so you can have the paragraph as the rapper and have a line break and a horizontal rule contained within them. And there is one important thing to note here that you can't have a paragraph nested within another paragraph. So that's considered in correct styling. Because each paragraph, it says its own block of content paragraphs cannot be nested within other paragraphs, even though if you do put the code, it will work. Technically, this is incorrect to do so Keep that in mind that you don't want to be nesting paragraphs of the other paragraphs. And there are other elements that provides structure that we're gonna be looking at later on within the lessons of this course that can be nested within themselves within others of the same tag. So try out paragraphs, line breaks and horizontal rule within the editor and see what happens within your HTML page. 7. 4 Headings and Bolded Text: Hey, welcome. And we do have some default content that we're gonna be starting with for this lesson. And when you create creating your pages, sometimes you want some text to stand a with over other text. And this is where you can apply particular emphasis on the various pieces of text. So we come into our Web page if we want this first. Hello. We want to change. This may be a welcome message. You wanna rate welcome to my page. We go to the page, we refresh it. And that welcome message really doesn't stand out very much. I'll make it a little bit bigger. It's kind of blends in with all the rest of the text, so it's not really jumping out at us. It's not standing out in any way. And this lesson I got to show you how you can make some text standout and provide additional emphasis on various parts of the taxi can highlight it using HTML. First, we're going to look at applying headings. Typically with most Web pages, you can have a heading, and this is gonna be introducing the main content so similar to the title it's gonna give you a brief introduction and a brief overview of what the contents of the page are all about. And this is why we use headings. They're also very important for SC old purposes, and the largest heading size is gonna be that each one. There's also H twos, so just type in the H two. There's also H threes, and they progressively will get smaller as we get increment the size of the headings. They are also act just like the paragraphs where they had applied margins around the core text. The headings will go all the way down to H six, so H six being the smallest in the line of headings. And this is slightly smaller than the regular default font size. If you try to go to H seven, it's not gonna work. And if you refresh it, this just gets displayed as regular text. So any of the tags or elements that are not recognized by the browser they don't have any additional properties. They just get simply get output as regular text. It's not going to take the formatting from the H six or the H one by default, so the H itself doesn't mean anything It's just the combination of the tag name that actually means something to the browser. And when you are creating content, you emphasize under each one the most important part of the page and then going down, you've got various headings, and then you've got heading three heading for and often times you won't get past heading three or petting for on most pages of content, and I've very rarely gotten to use H six. But it is there, if you do need tohave that type of formatting for your Web page. So typically what we would do is we would have a heading. And then we have some content below that, heading a boat, the page. So this could be a brief description or an introduction to what this page is about. We see that Welcome to my page is the main message of the page and then going down from there, we've got some content, and then we could have additional headings that are less important than the main one that stand out on the page. We also within the paragraphs, we might have some additional text formatting. So, for instance, if we have some text below within a paragraph as we do, and we've got a bunch of these hello worlds when I refresh it and I want my name to stand out from the rest of the text. And this is where we can wrap the text with various text styles, and the one that we're gonna be looking at is applying bold or strong and strong will indicate that the content within this element is important. So I refresh the page. My first name is bold ID on the page now, and it stands out from the rest of the tech, so typically used for importance, seriousness or urgency of the text in order to stand it. And that means that the content contained within their gets additional font weight applied to the styling by default, just as the paragraphs added margin around the element. This is adding fought weight to the font size. There's often confusion between strong and B for bold as they do look the same when displayed on the Web page. So it's often confusing for new Web developers when it's rendered out on the Web page and it looks the same. So there is a difference, and strong is for content of greater importance. While Bold is used to draw attention to the text without indicating that that text is important, so boulders more for decoration. And it was the original way to provide the fought weight on the elements. And with HTML five, we got strong, which allowed us to provide this type of emphasis on the element itself. There's also a commonly used italics format, and this the same as bold and strong allows the text to stand out. But it's different. It's slightly slanted italics and italics is indicated with E. M, and this is providing emphasis on the text content, so it's slightly slants the text on the page when it's applied to the content of the element. So it's used to change the meaning of the sentence, providing emphasis on that word. And this is once again it's look, it's gonna look the same as if we've got the I, which is the original way of providing and setting apart the text from the normal text flow . So refresh it once again, and now within the page, we've got emphasis and italics, and even though they look the same, the meaning is different. Within the html page. So E m is used for emphasis and I is short for ICT Alec, and that makes the text stand out. So with HTML, five most often were using Strong and E M as opposed to I and Bold. But all four are still valid ways Teoh structure and create distinction for the text within the elements. So now it's up to you. Try it out. Try out all the different each sizes said the different heading sizes. Add some text and nose and wrap them with the each 12345 and six to see the difference. And us well within your text within a paragraph, right? Some words that you want it to stand it. So apply the strong and the emphasis to those words so that they stand out on the peach and you could be ready to move on to the next lesson where we have an exercise for you. 8. 5 Apply HTML Tags Exercise 1: Hey, welcome this lesson. You're going to be applying some HTML code to this block of text to make it stand out to highlight some of the content that's contained within here. We noticed that we've got a name. We also have separation of the contents and out talksport html course. And there are also some words that should be highlighted. I just show you now what it should look like. And then you can pause the video, update the source code or the text in order to match by styling so you can pause the video Here, take a look at what the final output is gonna look like. Try it out and I'll walk you through the solution coming up, and we're gonna be applying what we've learned in the earlier lessons. So you had an opportunity to try it it and is so important that you do try the code yourself. So the first element and this one is fairly obvious that this is gonna be an H one of the most of the time. Within the Web pages, we start with the largest heading first, So applying the each one highlights it and makes the words stand out. We also have another heading, and that's the one that's down here. We've got the HTML course, so separating that out and immediately we see that there are two separate pieces of content to separate blocks of content. The 1st 1 is talking about Lawrence Kekis. The 2nd 1 is but that each time, of course. So we've been able to divide those out. Also, we've got different paragraphs of content. So the first paragraph is this is my website and if I separated out into a paragraph, it distinguishes it from the rest of the code. But it doesn't give it a second heading subheading and noticed that the size of the H twos are gonna be the scene. So it's gonna match with what the HTML course is, and it's also gonna match with this. And this is the main heading that we have on the pages. The name. So next let's add in a paragraph. So I enjoy coding and warm weather, and the rest of the text is also within the paragraph. But this is with a line break as we're adding it to the second line. But it's really the same thought so it's allowing us to add a line break in there and separate out the content so the line breaks. When you resize the page, the line breaks a lot more visible because the text no longer looks like it's wrapping. When you make it small, it does look like it is wrapping, so there is a little bit of a distinction there. And do you always try to resize your page? Because as you're building out your content, it should be responsive and mobile friendly for different screen sizes. So here it says that I enjoy coding and warm weather. So let's add some emphasis on coding and will make this strong. And if you applied the bold tax, that's fine as well. And then the warm weather is just a emphasis on the warm weather, and I'm not gonna wrap that period in there, but actually the period would still look the same. So it's OK if you did that. And here it's got kind of a quote. So let's apply the emphasis on all of this, and I'm gonna move this to ask you to keep coding trying the coat, and we want to emphasize this part of the paragraph. So now let's refresh. And now we've completed the first part where we've got the structure and also between them we've got ah, horizontal rule. So it's that line that goes across the middle. Next we've got Please do try this today and I want to try to add specific emphasis. So once again, this is a paragraph so separating it out and moving it within a paragraph. And this is another paragraph, and you can distinguish it when you do. The peach resize is so right now in the smaller size, it is gonna be wrapping and refresh and notice that paragraph after paragraph does add in the spacing as opposed to the line break, which doesn't add that in I get a bold the please. I'm not applying particular emphasis to the please, but I do want it to stand out and either one that you use, whether the bold or the strong. I know it's difficult to tell the difference, So either one would have been okay. And we're just looking at the wording that's contained it in there. So I do wanna have emphasis on the word today, so I do want not to stand out because there is a meeting that we want someone to take action right away. So that's why we're applying the strong to that. Whereas the please, it's more of just something that we want people to notice. And then this bottom part. And I'm gonna added the word help and put that within strong because I want particular attention to be applied to this area where this is highlighted as that someone needs help. And I'm also going to change this to upper case to really make it stand out. So it's another trick that you can use in order to make the text standard. And within here I'm gonna add in a line break and as well an explanation work within help to match the original structure. So that's it. So hope you had an opportunity to try this. And when you re size it, also pay attention to the re sizing of how the code is flowing and that will give you hints to what the structure is off the court. It's a great job on completing this exercise, and in the next lesson, we're gonna be looking at more of what we could do with HTML code 9. 6 Text Formats HTML: in this lesson, we're gonna be looking at how we can structure text. So in the last lesson, we did see the bold and italics and how that worked. And there's a lot of different tags that we can apply to apply structuring to the text. So we're looking at some of them right now, and some of this content Once I saw you, the source code might be a little bit shocking. So take a look at the way this looks on the page. It looks nice, and when you open up the source code that's behind the scenes. It's really messy. One of the things that I did want to cover in this lesson is how white space is handled. So notice that all of the white space between there but we only have the one spot of white space when it renders the code out, and that's because of the way that the white space is handled. So no matter how much white space you add into your source code, when you refresh it, you only get that one space being out rendered out on the Pete. So keep that in mind, and this is also something to keep in mind when you are writing your code, Teoh make it nice and neat, so it's easy to read when you have it like this. It's kind of all over the place. So, typically within each element were inventing with one space using the tab and then each level in were in denting. So it's easy to read when we look at the source code. Also, when we look at the source code from the page itself, all of that white space is still there because this is just a file contents. All of the white space is present within the file. So going into the editor and one of the other reasons that I really like using editors is that a lot of them will have different ways to clean up the code and make it more readable . And in this case, I'm using brackets and bracket has a really nice feature. It's called Beautify, so there's a few different beautify options with brackets, and I've added them as extensions. So under the extension manager and the one that I'm using is called beautified. So I've done that install on it. You can do a search and install it. There's two different ones. I usually prefer to use the 1st 1 but actually doesn't matter because Botham will play formatting to the text. And this has helped four for HTML, CSS and JavaScript. So what you do is select the content that you want. Apply that beautify too. So I'm gonna do a select all selecting all of the content and then under edit, I'm gonna ply the beautified. There's also shortcuts in order to apply that within brackets. And once I apply it, it makes it a whole lot neater. And you're probably saying, Oh, wait a minute, wait a minute. There's still some weird text in here and I don't see that on the page. And that's because this is HTML characters, so you can. Also, for every character that you have here, there's an HTML character to match. So these brackets are not brackets within the source code. And, of course, if you do include the bracket within the source code, sometimes this can be confusing with HTML. So if you do have a number of brackets, it's gonna think that this is a HTML tag and it's not gonna include it properly on the page , especially if you have some text in there. So if you happen to try to right the line break, it's gonna ply the HTML tag instead of writing out the coat. And that's where you need to use the HTML characters and as well. If you don't have the character on your keyboard, there's a number of different characters. A great reference at dev dot w three dot org's for a bunch of different HTML characters. And as you can see, there's a whole lot of different characters that you can include on your page. Some of them are nice icon images that you can use. Some also have the semantic meeting as well as the character code and at the hex character code. So there's a number of ways to bring these. So let's say, for instance, I want to add a heart to my page. I can select the character code, go back into the Web page code and paste it in, and they all start with the and and then the character code and the colon. And so none of this is actually going to get read into the peach. This one here is just a light space. So if, for instance, you want to have a number of spaces between some of your text as what we were doing earlier with the space handling, If I want to add in a bunch of spaces, I can do this. And the only way tied in spaces, because within the source code itself, it's only gonna count in one space out of time. So you need to use the character coats, and these ones are for the brackets. And then there's some more spaces that air down here on the page, and there's also once for back slashes. So these air again commonly used characters that you might use within your source code. So now let's take a look at the formatting of the various elements. And as we've already seen, there's the bold, the strong, the italic emphasized. So let's convert these into bold, and this is just a B for bold. There's also the strong for strong text. There's the italic, which is just the I and then the emphasize text, which is E. M. So that will contain that emphasize text. I'm going to remove out references to these as I add them There's also what's known as the pre formatted text, so so this one is used when you want. Apply additional formatting to your text and apply that pre formatting, and I can refresh that, so that allows you to distinguish that text as pre formatted text. There's also the marked text, and I'll just update thes within the source code to apply the marking for the mark text. And then we also need the closing tag for Marked. So what this does is this highlights the containing text, and I did have the dash there so you can remove that small is gonna make the text slightly smaller than the average text size and again it needs to be closed off so all of the formatting gets applied to the text that's in between. These and this text within itself won't apply any line breaks or anything like that, so it will just have the text in line. So it's nicely done in order to easily add and apply it to the text. Let's I use the delete so it's local loading that's opening and closing and then opening and closing for delete. So delete it is this strike through where you have the line through the text that inserted text, get rid of the dash there, get rid of the gosh there as well. So when we refresh it, what it does is that underlines it. So there's different use cases for using these. The sub will sub script the text from the rest of the text, so that means that it places that underneath the sub script will place it above, so that will place it above the normal text flow. There's the marked which we've already done. There's also a block quote taxed so this is used for block quotes of the text content and what that does is that provides the spacing around the selected block of text there's also underlying. And then there's also the strike as well. And what strike does is it does the similar to what we saw with the delete where it doesn't strike through off the content. So if we refresh it, the strike is striking the content through and you see that they're at the bottom. I added some extra spacing there, so move up the content So we've got the strike through. Big is, of course, a very self explanatory cause that's gonna make the content big. So any of the content contained under or between the big tax is gonna make it bigger, as opposed to small, where it made it slightly smaller. So just makes the tax slightly bigger, and you can pick and choose to use these as needed. And as necessary. There's acronym, and the way that acronym works is content contained between the acronym is going to be slightly separated and formatted out. There's quoted text. So this is just with Q in order to indicate the quoted text and puts the quotes around it so you can't select it. So this is a little bit different than if you had regular quotes. So it looks slightly different cause with the regular quotes, you can actually select them as text. And with the quoted text, it applies the quotes into the formatting. There's also cite make this smaller, so this is just moving it up and so that we can see it properly. So what site does is it cites the text contained within the site applies additional formatting once again making its standard slightly. Does this kind of metallic, So it does look like the similar to die Talic or the emphasize text where it creates it on an angle. And then, lastly, we're gonna look at code. And what code does is this allows you to write code like code within those tax so between those elements and making the text look more like it was very basic kind of text formatting , changing the fought style to be more in line with what you would expect to see with code. So I know we've gone through quite a bit and remember as well to make sure that you use white space accordingly in order to structure your content. And all of these can be used, they all have their time to use them most the time. It's bold and italic that you're going to be using Ondas well as underlying and these air war that typical ones and some of these other ones you don't use very often. But it's good to know that they're there and good to be able to apply them when need it. So now it's your turn. Try them all out and see what happens with the text when you wrap them with the various tags that we've gone through. In this lesson, 10. 7 HTML comments: Hey, this lesson is gonna be about comments when you are writing your code. We looked at the importance of inventing the code and having a nice, neat code so that whenever you're nesting elements within other elements to use the tab to do an in debt, there's also an ability within HTML. Iterated comments and commenting within code is really useful. It's really good practice to add comments. The comments are not displayed in the browser, but they could help document your HTML source code. So this is another useful resource for developers. And when you're writing your code to include comments and they serve as documentation for what's happening within your code, and especially if you want a reference that later down the line in a few months or a few years, it's always good to know at what point and what the reasoning was for if you needed certain place holders or certain tags in certain places within your coat. So I'm gonna add in comment and the comment is added in by the less than sign the explanation mark, Dash, dash and you can see that brackets graze out all of the information, and then you just write comments and then dash dash and the greater than sign in order to close the comments. The comments are not going appear anywhere on the Web page, so it's not visible to the user. And this is another formatting and documentation option that you can do in order to better document your code, and you can have as many comments as you want. You can also have them for placeholders, so if you don't have content right away, they can serve as reminders that you do need to add in content at a later point. When you go back to this particular section, you know that this is why you've included this paragraph, and typically, when you are using comments, try not to include them within the tags, but try to keep them to the site of the tags or on the next line. There's also commenting that you might find within the head area and throughout the body content of the website. So depending on what you want, a document and what kind of notifications and reminders you wanna have within your HTML code, also, comments can go across multiple lines so you can have comments and you can have multiple lines of comments and at as many comments as needed. And then when you're done commenting, then just do the dash dash greater than sign. So go ahead and out in some comments within your Web page, and you could be ready to move on to the next lesson. 11. 8 HTML HyperLinks Anchor: Hey there. This could be a really important lesson because we're gonna be looking at the single most important tag that connects all of the Internet together. And that's gonna be the anchor tag. Almost every Web page will have some type of hyperlink within the page connecting different pages as well as connecting content within the same page. That's the element that we're gonna be looking at, the tag that we're looking at in this lesson. But before we begin, we need to get some content into our HTML code. And this is where you can use Laura Ipsen generators Laura Ipsen type content that looks like real content. But when you look at it, the words are not really words. There just placeholder text look like they're Greek and this is Laura Ipsen text, so it's often used in order to generate dummy text and placeholder text. So I'm just over at a website called html stripped dot com, ford slash storm ups and generator. And there's number of these generators that are on line, so I do need to add in some dummy text into the project. So I've gone over here. I've selected the number of paragraphs, headings, bold links as well, and let's generate them. So it generated some random content. And then just down here below, you can select that content already within HTML structure and take that content and pieced it within your Web page. And I'm just going to do a quick beautify of the content to clean it up and refresh the page. And now we have a peach with a bunch of content, and it already created some hyperlinks. Let's take a closer look at these hyperlinks within our HTML code, so the hyperlinks are represented with on anchor tag. So it's just the A tag, and the core of the hyperlink is what's contained within the attribute part of the hyperlink. So first we link out to a website can also specify the behavior off when the link gets clicked, whether it's opening up within a blank page or whether it's opening up within the same page or the parent. So there's a number of options here for Target and then the content that is going to be seen as the hyperlink on the page itself. So in this case, we've got the i. T. A Nemo, Beato Beatty or gets closed off with the anchor tag. So closing that off and that is what creates the hyper link. So the structure once again and most important stuff is contained within the U. R L part of it. And then there's the text information for the hyperlink itself. So HTML links are what it's known as hyperlinks. You can click on a link, and it allows you to jump to another part of the document or another Web page entirely. And by default they're gonna be underlined with the underscore as well as they're gonna be blue and color to make them stand out from the rest of the text. Let's create a hyperlink, and we'll just create one rate of the talk. So setting off our anchor tags and typical text within the hyperlink to just saying Click me and when I refresh it and we see we've got the text up here at the top notice. That's not underlined. And that's because there's no attributes yet within the the anchor text. So within the hyperlink, it's not actually a link until we add in the attributes so you can click it all you want. Nothing is gonna happen. And until you add in attributes, this is just gonna be a regular text that's gonna be showing up in the paper linking to another Web page that's, Ah, local Web page. In order to create ah, hyperlink, we can link to the local path, and that's gonna be a path within the same folder structure that the current file is within . And you can also see from where our Web page is located on our computer, that the local path and everything sitting within Web dive that's contained within that what local index file so we can navigate up and down from there and the late files when their relative are relative to this position. So let's had in the location of where we're linking to so that H ref is what destiny defines the destination or the address. So let's specify the address attributes, and we've got to drop down because we're using brackets and it's giving us all of the local files that we can link to. So it's just select. Another file will link to that and adults in the percentage 20 instead of the space. So now this is gonna turn into a link it's gonna be blue, and when I click it, it's gonna take me to that other HTML page that I have within that same folder. Directory this. And if I wanted to open up to a new page, I can add in the attributes of target, selecting Blank will open it up in ah, brain, you tab by default. It's opening it up on itself. So when you it's opening up on self, that's the default. So that was the default action where I clicked it and it stayed on the same tab. So this thinking strategically, when you are designing your website, you don't want traffic to be leaving your your site. But if you are linking within your own site, then typically you're just linking within the self so you could just use the default toe link. So now when I click it, it opens up within a new tab in the browser, and I still can tab back to my original page. So there's two ways to provide paths to the files that we're looking for so we can provide an absolute path or we can provide a relative path, and the relative path is the one that is dependent on what file where the file is located. Where is the absolute path will always point to the same location. So when you use an external website, then you're gonna be using an absolute path because this allows you to provide the link or the same location of that file. So it's independent of which file is accessing it. Now, this is going to be the relative path because we know where this file is located. But what happens if I take the same file? And if I do a save us, I create a new folder and then I saved this index file within the new folder. So now when I opened this, it's located within style. So I open it into the browser, selecting open with, and I'm gonna just open it with him. Chrome. I can open the file and it still has the same link. It still looks the same, but if I click it, it's not gonna find the file that I'm looking for because this new file, which has the same source code, is no longer relative to this file because it's got a new location in the folder structure . That's where we could use the absolute path. So if I wanted to link to a website like Google, I would use the absolute path. So, http Colin Ford slash ford slash And then the Web address said, I want to link to. And when you are linking out to another website than typically we're using the blank target and then within the link itself. Now we've got a link to Google. So if I click the link to Google, oh, take me out to the website and this path could actually be the same for the other file. The other father we just cloned and I'll just copied in there. Go to the file and refresh it. Now, when I click Google, it will still open up within Google because it does have that absolute path. There's also other uses for the anchor tag, and that's to link within the document itself. So if I go down to some of the content that I have down here, and if I add in an attribute oven, i d. This is how we can identify this particular section off the content, and I'll just call it given an i D of page one. When you do give the attributes of I d. They do need to be unique and they can be added into any element. But you shouldn't be adding in another i d of the same name. So when you are creating the next I d that make sure that you're given a different name, you should only be creating one unique i d per web page. So if you want to link to that I d. And this is what's known as a bookmark and we're not gonna list target of Blank because we no need because it is on the same page. So all we need to do in here is reference the i. D name and the path to that element with the i. D is hashtag and then whatever the I D value was, Now it's refreshing and click bookmark and notice that the scroll bar will scroll down to the part of the content where we did have the page one I d. And that indicates this content over here all market. So it does stand it and we can see it when we're scrolling. So once again click bookmark and will bring you down to the part of the page where the bookmark is present. If you've got the page opened up, and if you refresh and hit bookmark, it's not gonna scroll anywhere because this is already showing the full page eso in order to get that scrolling effect, Then that means that you need to have typically a lot of content. When you are using the bookmarks, it will move down to the part of the code where that content is present. So now it's up to you. Go ahead and create some hyperlinks. Create a Web page with some hyperlinks to your favorite websites. And also try adding in the I D. Attribute and setting up a few bookmarks. Make sure that you do have enough content on your page that it will scroll. Or you could minimize the screen size like I have, and that will give you also the ability to click it and automatically see the page gets scrolled to where that element with the I D. Is present. And once you've done that, you're gonna be ready to move on to the next lesson. So go ahead and drop those anchors within your HTML code. 12. 9 Apply HTML Tags Exercise 2: Hey, in this lesson, it's a challenge for you. What I want you to do is to pause the video and create a three page website. Create an index dot html page also on about dot html page and a contact dot html page ad in the proper tags within the page. Use comments in order to note where you need additional content within those pages and, most importantly of all, link between the pages. Create a small navigation at the top where you can link between and press the link seeking go from page to page show a different heading, which matches the page title. So just like an example that you're looking at, you can also use the dummy content generator within HTML. Strip for another one to generate some dummy content to place within your Web pages to get a more feel for it, so that feels more realistic. So this is what we want to create. Want to create a mini website, so make sure all of the files are going to be sitting on the same directory and then create the linking between the files. So I click home. This is our starting page. Why click about it goes to the about page and notice the content changes as well as the file, is different contact as well. Another file and the reason it shrank down there changes to 200% so that they're all the same size and also create a link. Ah, hyperlink to your favorite website within the content of the pages. And then don't forget to add in comments where you need it as you're building the pages. So pause that video. Go ahead and create your many website from what you've learned in the earlier less. And the purpose really is to get coding and to try what you've learned in the earlier lessons. So go ahead, give it a shot and I'll walk you through the solution coming up. So we start every Web page by the default Web page where it's going to start within the website, and that's index dot html so you can create a brand new folder. If you want Teoh, have it separated out. Or, if you want, you can just clear the index page created brand new index dot html page and start off by specifying the doc type, and we do need the explanation mark in there setting the doc type as HTML set up your standard HTML tags. You can use the template that you created earlier as well. And then we've got the head tags within the head, set up a title and for each page, give the title within the page. So this is the home page. This is their main starting page, and in each one has body content. And we need to set up the each one tanks for home, also adding in ah, horizontal rule to separate out. And then what we want to do here is create that navigation. So I'm gonna set that up in a paragraph for now, and we're gonna list out the pages that we have using the pipe to separate it. So we've got home and about and contact. Let's add in the hyperlinks for each of these and then setting up the path where they're located. And I moved a text content within the hyperlink. I'll separate the's on separate lines, so I can easily just copy it, and this one's gonna be about. And I know we haven't set up the about dot html, but we know that this is the path that we're gonna be creating and then one last one for contact, and that one's not gonna need to pipe and then within the content generates at least one paragraph of content. So I grabbed the paragraph of content here and then update the link to link outs to your favorite website. In this case, I'm gonna be linking out to google dot com. Make sure that if you're linking out that you've got blank as the target go to Google and I'm gonna be using my index page as a basic template for the other pages. So we also have the paragraph there. We've got Google in there, so I've got a link out. We've got the horizontal rule separating the page content. Let's take a look at see what the page looks like so far So we've got the hyperlinks and then within the comment area. So no, this isn't gonna be visible to the page. Odd mawr rial content, and that's something that we need to do later on. If we develop this website that this was just dummy content toe have within the Web page. So once you've created the first page. And if you're happy with the way that it looks than used that same page and that's going to save you the trouble of having to rewrite all of this code, you know you need a page called about dot html to go in and do save us and save this page as about dot html and then also saved the page as contact dot html that will take care of all of the linking within the pages. So within the navigation of the pages, and now you just need to go through them and update them. So open up a boat and make sure that you update the heading as well as the title. You can also change the content, so it's not all the same. And yet I'm still gonna have to add more content. But the each one is about open up contact and notice that the paths are relative. They're all on the same directory, so I don't have to change any of the paths. So they're all going to be sitting within that same root directory if they are sitting on different directories than be mindful of the fact that you knew need to make sure that you're linking to that new file path. So depending on where it's located and we're gonna be going over that quite a bit more is we progress through the lessons and adding more linking between various files within our Web pages. So once you've created index about and contact, you ready to try out your many website that you just created. Let's get rid of us and you could get rid of the hash there. Eso we've got home about contact so it's click about were moved to the next speech. Contact is working, Home is working, and the reason it's bigger is because I got this set to 200% when I go to those have to reset it to 200%. So just remembering that in the cash. So if you're wondering why it looks different and also let's right the link to our favorite website and that's working as well. So we're all good and we've created a mini website with the navigation between the files on our on our site and gradually sins on making your first website, and as you progress through the course, you can add in even more HTML tags to do even more with the website that you've built. Let's get going 13. 10 MailTo send Email: is gonna be a quick lesson with an example of having and how you can add an address as well as a male to link to your website. So adding in an address, you can use the address tag, which is just a block tag. It's is going to give you a block spacing for your content. You can contact me at adding in on anchor tag and then with your name and then the hyperlink. Where it's gonna go is we're going to use the mail to tag, and that's going to allow us to when the user clicks this, it's going to open up their client, their mail client, on their computer and then specify a male to email address. And so this will automatically default to opening up the mail so more of my address. So if you're ever in Toronto, you can come visit me. I'm from Toronto, and then also you can have ah, phone number there and the way that you could do a phone number. So a lot of the modern devices people are coming to your website on a mobile device. They can also call you directly, so this will open up the phone number within their phone client. So using the same anchor text and using the tell prefects and then putting in the phone number, it's a proper structure for the phone number. And this is for mobile devices. So if they click this, it will automatically open up their phone device with the number already pre doubt and save so refreshed. And I am on a desktop, so this isn't gonna actually work. But if you do have a phone connected, then it will automatically add the phone number and but a choice. It does try to do it within face time. Here. Also, the mail to will open up the default mail client on your machine with the content already filled it. And if you want to go one step further, you can also have a default subject within the mail client so that using subject and that will pre fill the subject values You can also add in the body. So it's the same idea where we've already got the subject and body, so let's refresh and try that one more time. So if your Web visitor comes to your website and they click it, it's gonna automatically open up their mail client is gonna populate the to box the subject and as well as the Conte content within the body area. And this is all coming from that hyperlink. And once again, this is just the phone numbers will work on most mobile devices. This is good toe. Have if you do have a phone number So it really makes it easy for someone coming in on a mobile device in order to contact you to try it it add it to your contact area or at the bottom of your website. 14. 11 Image Tags in HTML: Hey, in this lesson, we're gonna be looking at adding images to our HTML code. So you know what they say An image is worth 1000 words, and we are going to show you how easy it is to add an image to the page. So first, all let's open up the editor and we're going to go into the editor select where we want our image to appear on the page. So I'm gonna put it between the navigation and the other paragraph. So between the content paragraph, I'm gonna have an image appearing right at the top in this paragraph. So setting up the image tax, it's I m g for the tag. And this is a self closing tag and similar to what we just saw with the anchor text that we rely on the attributes of the element in order to provide the functionality we need to provide a source for the image in this attributes is called S R. C. So short for source. Then you do the equal sign and you can locate where the image is located if the images local on your system. So I have an image here within the same file directory as my index file. So I'm going to simply select image and links out to the image. What I refresh the page. There's my image. So we do have some properties that we can set up, and one of the things that you do or should be adding into the images for accessibility reasons is the altar attributes, so it provides an alternative text for the image. And it's not something that can be seen unless the image, for whatever reason, doesn't show up, and then it will show the text instead of the image. And this is also used for screen readers. So the attribute name is Ault, and this is where you would put a description off the image. So it should be something that basic a few words or a sentence that describes what the image is about, and this again. This will show only if the image cannot be found. So if I rename this image and if I refresh it and the image can't be found than it's going to show the altar text, there's the logo, Discovery V I. P. And that's showing instead of the image, you can also link to images on the Web and these we would be using the absolute path, so that would include the http. Wherever the website is located, there's a number of resources on line and one of them that I commonly uses. Placeholder dot com. So when you are designing your website, you might not have the images handy. So you want to have these placeholder images and within the dummy text to get you to have a good feel for what the website is actually gonna look like. So this is one of those resources that is super useful so you can set up the picture, the image dimensions, and this also gives you a sample of how you can a link to conclude a hyperlink with the image, and we'll show you that within the code as well, setting the size of the image. So the 1st 1 is, If you want 1 50 by 1 50 you do slash 1 50 There's also different file formats and these air the typical image format extensions that you're gonna encounter. So there's Jeffs. There's PNG's and there's J Pegs and J P E. G s for J pegs. There's two different types of J pegs that urine can encounter for Web in images. And all of these get read by the browser, and the browser is able to determine what the image looks like. You can also within here you can set a custom text. So let's grab the content and go back into our HTML code. And what this time we're gonna add an image within the text content. So set. Select the space where you want to place the image. So I want to place it just in here and for the word and am at in the image tag specified the source and because this is going to be an absolute source. So we're linking out to the source and we got to remove it that excess and then close off the quote. Seacon do single or double quotes. It doesn't matter for the path to the image and then close off the image tag. Refresh it, and that's going to give us the image on the page. There's also different ways to resize the images, so sometimes you might have, ah, large image and you want to resize the size of the image. And this is most commonly done with styling Now previously with the image tags you do have an option for with in height attributes, so you can use thes as well, and this is within a pixel, width and height. So if you want to keep the dimensions the same, you can do with of 100 so that will resize and keep the proportions the same. If you update the height, you can also set that, and that's gonna changed the proportions, so it's no longer going to be in proportion. So this is one way of doing it, and you might find this still being done this way within the attributes. But now, more commonly, we use the style, so this is the same as CSS, and when you find out more and we learn more about CSS in the upcoming section, then you could become more familiar with what's possible. But for now, we'll just do a quick overview where you can set the width and the height of an element. So I asked that the width of this element to be 300 pics refresh it so it's 300. If I resize it back down to 100 picks notice that the dimensions stay the same and you can separate out and you cannot in as many properties as you like. So setting in the height and I'll set the heights to 50 picks. And there's also different types of units that you can use. So right now my image, I forced the dimensions 100 by 50 so it's squish the image, and this is something you also have to watch it for when you do have images, especially if you have images with text. You don't want to play around too much with forcing the sizing of these images because the pack the text will become pixelated and will be hard to read. Also, make sure that you do add in that was all tax. And then, of course, with more styling, there's more you can do with the images where you could set the different positions, as well as create them in line with your text. And that's all done with cascading style sheets with CSS. So now it's up to you. Go ahead, find some images either on your computer, move them in the same folder directory as your index file or link out to a Web image that's contained online, and you could be ready to move on to the next step 15. 11 5 Social Profile Linking Exercise 3: Hey, now that we can know how to create images and out images to an HTML page, this is gonna be the challenge for you, and that's to create a brand new Web page. So it's another new HTML file that's gonna have some details about you and also linked to your social profile. And also don't forget to include that image of yourself from your social profile. This is what mine looks like and you can create something similar. You could copy what I have, and I'll walk you through how I've set this up in the upcoming lesson. So pause the video here, go out to your social profile, grab those images and create a simple resume. Linking to your social profile for this exercise, do is go to file, create a brain you file, and then save this file as our resume dot html. It's now we're ready to create our page from scratch. So first we're gonna set up the doc type, and I forgot the explanation. Work for Doc type and sitting it us html. Then let's create the HTML tax opening and closing HTML tags, opening and closing head tag and opening and closing title tag in here within the title. Just gonna put my name and then within the body. So this is where the body of our content is going to go already have my social profile opened up on the right hand site and you can go to where your image is located and then click the image and you can right click it or on a Mac you can go and you can press the control plus the click. And then, from there you've got ah, pop up window. That's gonna ask you to save the image so you can save it to your local machine and just linked to it. Locally, you could also open the image in a new tab. So we're gonna just do that. We're gonna open the image in a new tab and then one more time. Click it and press copy image address within your HTML code source and then paste the image address. And this will piece that image onto your page. And don't forget to navigate to resume dot html and that will show the image within our page. Now it's also add in the each one tax, and we also want to link out to our social profile and also have a little bit of a paragraph with some information about us. You can also use whatever content you have on your social profile in order to add that content. Refresh it. So I give you some content as well as the image. And now we want to add a hyperlink and using the image as the hyperlink option. So adding, Ah, hyperlink And wherever we want a link out to and wrap the anchor tags around the image and that will make the image clickable. Teoh, go to your website, select the website URL. Place it within the H, ref. And don't forget to add in the target as blink because this is gonna be navigating away from your page. So refresh it. And now, whenever you hover over it, you've got the icon that is for hyperlinks. So when you click that it's gonna open up a new page with your content and with your social profile, and you could do this and linked to other social profiles as well. Html structure toe ADM. Or to your page if you want, and then also don't forget to add in style property to set the with to a smaller size of your image is rather large, and you can always take all of that content and place it near the top, so that will automatically left a line and a look a lot bigger on the larger screen. And I did forget something on the image. Do you know what it is? And that's gonna be the attack. So don't forget to add in all tax and save it. And then when I refresh it so that alters their behind the scenes in case the image doesn't show up for whatever reason. 16. 12 HTMl Lists UL OL DL: Hey, this lesson, we're gonna be looking at lists. What lists do is they allow us to group of set of related items or lists. Together, there's three different types of lists that we're gonna be looking at within these lessons . Let's go ahead and create a list of horizontal rule and a list in between the two horizontal rules. So do a refresh. And so we've got our spot here where we can create the list within our HTML page. So the 1st 1 that we're gonna look at is a new ordered list. So it starts with a UL tag, and that specifies that the contents of this one are going to be a new ordered list. And a no ordered list simply adds bullet points or bullets those small round circles. And that's the default for a new ordered lists. And then within the n word it list, each one of the list items is represented with the L A tag, and then here you can list out all the different items on the peach, and the more you add, it'll nascent neatly stack within the UN ordered list. You get out as many items to the list items as you want so loud in three items there within the list items I would see it groups the content Mason neatly and together. There's also what's known as the ordered list, and what the ordered list is. It's with the old L tag. And again we've got the list items that are contained within the ol tag, so similarly to what we just saw with the A Nordic list. But the ordered list will produce them in order, so it starts with a number and it increments that number. There's also a few different other formats, so look at that where you can update that within the attributes and the last type of list is going to be a description list. So quite honestly, don't see these used a whole lot. And what description lists does is that lists a set of terms and a description for each one . So these are a little bit more complex than what we saw with the an ordered list. So this is represented by the D L tag for description list. We have a D t tag. So this is the term name. So this is represented by the DT tag, so one or whatever and then D D represents the tag description for each item. So that would be the first night number. And then you could add in subsequent items into the list the same way and again you could add as many as are needed. So we refresh it and this one ISMM or of, ah, structured kind of content where you see the numbers being represented with the kind of in . Then there, the tab and then the first item were the definition. The term name is also represented there. There's also more you can do with the lists themselves, so you can with the attributes you can specify different list menu markers. So here we've got the default, which is just the disk. So going into the an ordered list and I'll give you a few samples of them is the number of different ones, and this is all controlled within the style properties. So you specify the style property and then list style is the attribute that you're looking for, and then these are all the possible attributes so you can actually turn on a new ordered list into an ordered list by specifying lower Alfa. There's lower Roman Latin. So there's all these options. And then there's the upper case of the Alphas. So if we just wanted also a decimal list, we refresh. And now we've turned the A Nordeste into an ordered list. So there's a lot of options here. I will select another one. I remember the default again is going to be the dis, so it's gonna be that dot There's also circle, which to me it really looks very similar, but it's just not not filled in. It's just not that dark filled in dot that you see with the disc. And there's also the Alfa versions. So these air just the letter ABC with the ordered lists. So that's with the oil tag. You've got more options within the attributes where you can specify by type and brackets gives me the list of the various types. So he sent started with numeric, starting at one, so this would be with digits. So that's the default that we have. There's also with letters, so opera case, lower case. And then there's the Roman numbers. So upper case and lower case for the Roman numerals and this one's kind of need because it gives you the place. Roman numerals If you want, you can also within on ordered list. You've got another attribute called Start. So this is the start number and let's start our Roman numerals at 50. That starts out with L. There's also list so you can have nested lists, and this is also commonly done where you've got a list. But if you have a number of other items within the list, so we've got our are a Norden list. And let's say, for instance, within the list item, we're going to create an ordered list so you could create the ordered list nested within. And then these list items are gonna be nested within that ordered list. Let's create a few more. So do 12 and three, so you'd list the you would nest. You can list other lists within the list items, and that will create that nested effect. You could also kind of give it kind of this title effect within the A nordeste, and then you've got all of the list items. It depends on how you want to structure it and where you set the block of court and most commonly, you're gonna find that it's un ordered lists and were used in the style properties to set what the list indicators are gonna be with list style is gonna be. So now it's up to you. Try it. It creates some different lists. Go through and create an unordinary list of your favorite fruits and maybe also a list of all of your friends and then maybe a list of the different courses that you've taken using the different list formats and could be ready to move on to the next less. Oh, yes, and I just checked my list. Also, make sure you do it to do list as well. 17. 13 HTML Tables: Hey, in this lesson, we're going to be looking at each to melt out tables, and the table element represents tabular data, that is, it's information. It's represented in a two dimensional table comprised of rows and columns and each one of the cells that's contained in their contains information and data and other HTML code. So let's first start by constructing a table, and you could also think of a table as a two dimensional chart and table is defined with table tag. And then within each table you can have a number of rows. So these air indicated with the T R and then each cell or each table data unit is represented with the TD. Let's do a quick refresh, so there's our first basic table, and then you can have as many columns as you want. So may table data cells as you want, and then also as many roses you want as well, so adding in additional rose, I could just simply copy paste it and we're constructing our table. There's also the table header, which is defined Why th so usually that's near the top. So this is the table header tag, and this is also contained within a table row. So wrapped the table headers within the table rope, and this one's gonna have two columns. So maybe it could be counter one and counter to that. We just have the one and two in each one of the columns, so that's a refresh and the table heading by default. It gets more of a bold styling applied to it, and each one of these table elements can contain any type of HTML. So you could also have images in them and a whole bunch of HTML. So depends on what data that you want to represent their and I'm just copying and pasting some of the HTML from before into the table. And that's how it just gets displayed within the table. And what happens is the other cells will adjust. So this cell adjusted to be the same height, and it's automatically positioned the content of the center in order. Add table, border. So typically this is done with styling, and we're just at the style, attribute, and border is just indicated with the border property, and there's a short format for border property. So it's expecting three parameters there, which is the with the border style and then the color. Since we add that and we refresh, that's going to give a border around that property, you can add it also around each one of the elements. Sabb along the rows and as well as the cells if you want, and additional styling as well is plied with the styling attribute. There's also one for border spacing, which is commonly used in tables. So this is just picks with, and it will allocate a little bit more spacing for each one of the border styles. You might also encounter in some cases that if you got a number of rows and you might have several cells that are spanning the one roll, let me add in a another rule here at the end, and I just call it and call him. And if I refresh and we're missing data within these cells here because we only got the two columns of data, I'll make this a little bit bigger. So it's easier to see. And if I add in on this cell and if I add in on the bottom role, but I leave the middle one still, with only two. But we want this content to span, too, of the data cells or across two columns. So let's select that element, and that's the one that's right here. So we've got 12 Where's the rest of them? Have three and you can account for call span using the coal span. Attribute, and then you just need to indicate how many columns it's spanning. So when you refresh now, it's gonna be spanning that entire with, and I'll quickly just add in a border color so that we can see what this element is spanning. So now that cell will have a border and its spanning across both columns. You can also span across multiple rose if you want. Let's do one more time, and we'll copy and paste across multiple rows. And let's say, for instance, instead of having this one, because this one is gonna have the three cells and we want this one to be multiple rows to another refresh. So what? This want to be multiple rows? So let's add in the border styling so that we can see this cell and we want to spend the two rows. So let's add in the property and the property Teoh span multiple roses roast spent. And then you just specify how many rules you want to span. Now we refresh it, and we're spending the two rows here is spending the two columns you can add in the calculations as needed to span across. Different role is different columns merging the cells together effectively, and before constructing a table, you should plan out how many rows how many columns. And this could be driven by the data that's gonna be contained within the table. So plan it out first before you construct the table. When we create tables and with modern Web site design, we do it with styling. So we update the table way and look and feel of the table by applying style content to it. So you can do that with the style tag at the top and then selecting the table element and applying this different styling properties. In this case, we're copping pasting the border. So this is going to do the same thing that we saw with the style attributes. But it's bringing it out of the HTML code, which gonna make it more easy to update if needed, and to visually see when we are looking at the code within the HTML where the styling has been applied. And then, in addition, you can copy separate out the different elements that are going to get the styling. So a comma TD will style the border property across all of the table data cells, and there really is a lot. You could do it with styling, but I just want to introduce the basics of styling because it's important when it comes to tables, and it often gets applied to tables. So the best format is usually to apply it within a separate styling tag element instead of doing it in line. Because as it's easier to read and select an update the border styling. So if all of a sudden you wanted toe have read styling, you could easily update the color within the style tagging. You don't have to go into your HTML code and figure out which sell it is that you want to access and apply styling, too. And for even more table structure, there's the table, head, table, body and table foot, so these air indicator with T head tags, T body tax and T foot types. So T head groups the header content in the table T body groups, the body contact body content in the table and t foot groups the footer content within the bottom of the table. So going into the table structure, I'm gonna add in the T head, which is going to group all of the content that is designed to be sitting within the head section and then close it off and just as we did with the main HTML tags. Next we've got a T body area, and this is where the core body goes. And they might also have, lastly a T foot and then another table row. And this one can be call span all the way across. And we did have three columns, so you can do double or single courts, and then we just right footer at the bottom. So it's refresh. And now we've got the footer sitting there at the bottoms. We added in the table foot. Now it's your turn. Go ahead and construct a simple table. Make sure you've got a bunch of columns and rows. Also, try updating the call span as well as the role span. So across multiple rows across multiple columns and then try the style tag by selecting the table and the table cells and applying a border to them, and could be ready to move on to the next lesson. 18. 14 Back In Time Challenge 4: Hey there. Welcome to my time machine. I'm gonna take you back a few years back to you, January 17th in 1999 and we're gonna look at what websites used to look at. And yes, this is a modern web development course, but it is important to understand where Web design came from. And that's why everything is all boxy because in the last lesson, you learned about tables and tables used to be the way that websites were designed. So right now we're looking at we went to a website called Way back machine and this allows you to travel in time and check out the different ways websites used to look like. And when you open up the source code for the website, you can see that it's a very table type structure. So table, we're providing everything. And this was way before we had styling. And you can see the attributes for the borders, cell padding, cell spacing, and with they were all contained as attributes within the table cell. And this isn't done anymore with modern website to sign. And we saw how we can apply styling, and this was using with style tags and applying the different properties with CSS. So see, we've got the main table in this holds all of the content. There's a table, body table, road table cells. And then there's tables that are nested within other tables and these air providing even more structure to the peach. So what I want you to do is to select any website you want. You can check out eBay as well. Go over to web dot archive dot org's typing your favorite website and go back and see what it used to look like. And this is only really applies to websites that are probably about 20 years plus old on. Then, after that, in the early two thousands websites got introduced to styling. The structure of it was then controlled with styling. But going way back, you can create from what you've learned with HTML, you can create your basic website structure, so let's go in and create a brand new peach within the editor so you can pause the video and check out one of the other websites, and I'm gonna walk you through the coding and the creation of one of these older sites. So saving this sites and it's gonna call it debate HTML and we'll navigate over to that page. So ebay dot html. Right now we're still using the file structure, and that's where it's located on my computer and then going back into the basic structure and we are going to keep it a little bit more modern where we're not going to use all of the old styling. We are gonna specify that this is the doc type in the dock type that we're gonna be using is gonna be the html five doc type. We're not going way way back, and we're not going to do everything like it used to be done. And we're gonna try toe do as much as possible with styling as well. So we're modernizing what was in the past. Essentially. So create the HTML tags and the basic HTML structure, the head tag and then title within their eBay 1999 and then next create body tag and then within the body tag. So all of this structure is created with the table, says one main table, and then within this table we've got multiple rows, and you can see this with modern Web site as well. It's everything is in blocks of content, and it's styling that's applying the positioning as well as the background colors. But here we have background colors that are being provided with images. So these are images that are actually providing all of this styling type effect, so you don't have to obviously copy all of those. But you can just do something similar to get a feel for how websites used to be designed and they were going to modernize it and bring it into the future with some styling. So now we've got the table, so the main table, and you can roughly see that this is comprised of approximately about 2 to 3 columns, and also I am using chrome. So if you right click on the element and click inspect, you can get more details. As I'm doing so. The main table has a width of 600 picks and allow T. The computer screens were pretty small and then within it, we've got the table body, so let's do the same. We're creating a table body and then within the table body. We've got our first rope of content and this first role of content. So the first cell had was had a width of 1 70 then it had a table within. Not, and that was the left hand side navigation table. So creating that table and nesting a table within that table, and then this table had a bunch of rose and all of this content that was contained within each one of these rows. So these were all of the hyperlinks that we see here, and each one contained a different link out to also had the different images. And then we go down here at the categories so quite hard to really copy exactly. And I don't really want you to spend too much time trying to copy it. You can just do something similar where we got the categories, and then each roll looks like there's maybe another role where it's got all of the contents . So you could do that within hyperlinks. It doesn't have to be exact, but it is good practice to type and practice. What we learned in the earlier lessons and it get did get quite complex back then. We're creating these because each one of these is a separate role of content and it's also setting the font sizes, so there's very quite a bit of a complex, it clump complex code structure, and it's a lot harder to read. So this gives you also a sense of why we need tohave styling, because this is gonna make it way easier to read, to navigate and to look through. So all of USA's well, they were hyperlinks, so you can add in the hyperlinks. I'm just going to use the hash because I don't have an exact link, and I don't really want to go through all the trouble of making all of these pages. This was just more for demonstration purposes and to get something that looks kind of similar to what we see. Refresh. So there's our categories. You can also copy the image address and add in the image at the top. So I believe we actually had that somewhere within the cell. So we go back, we're gonna have our image there, and then, with a little bit of modern styling, we can out in the style tag, select the main table, and then for the table. We know there's a width of 600 picks, so weaken style that table at 600 pics, and then you can also go down and list all of the rest of the content. And then within here there's another role of content, so going back into the source. So I'm using the display within within Kroll, where I right click and I do inspect. And that gives me the source code within this developer Consul, where I can edit the code and then he's also see some of them are using the strong tags. So next cell is another table, and this one is for 50 across. So going back to where this one ended and then we've got another table nested within their and it really does get quite ugly from their some of their table roll. There's two rows there, so one is the upper navigation. There was a list of all those items there for the navigation, and while you should be really thankful now that we do have styling instead having to go and construct all these tables that are nested in tables in order to get the structure and positioning and then it's got another role and then this role has probably within this cell there's another table. So let's breaking up those other columns. So we have to nest another table within that table. And aren't you glad that now we've got modern website designs, so we don't have to worry about all of this nesting of the tables, and then it looks like the main content is here. And then we also have an area where we have ah side now bar a side. How? Just call that a side. Let's see what this looks like. So there we go. So it looks like we've got some of the structure and I actually did reference this main table, So I do need to apply the styling to the main table Onley because it looks like I'm applying it to all of them. So sometimes this is why it's better not to select all of them and just do a quick refresh so you can see what things look like. So we do have the basic structure in the basic outline. It looks like there's a bunch of hyperlinks. There's some more images contained in there, so thin the main content. So there's some more content and it looks like this navigation buttons eso these words are actually the navigation buttons are actually images. So again, very complex. Teoh Copy even with the modern stuff that you know you're weak and then within the east side and I just paste that in there and we'll clean it up with the beautify. So see what that looks like. So that's the basics of it. And once again, you don't have to go through everything. But this was just to get a better idea of how everything is structured and to get more familiar with how HTML works. So essentially everything is in blocks of content. And then we're taking these blocks and we're applying styling to them to make them look a whole lot better. In this well is moving them around the pages. So what The html itself? It does get rather difficult to structure and create the website to make it look the way that you want it to look. But back in 1999 this is all we had to work with. So check out the way back machine, you can search for any website and it will show you all of the different websites. And it captures periodically fairly regularly for some of most of the main sites what the websites looked like. So you can go back 20 years, or you could go back 10 years and you could take a look at the various websites. Have some fun with this one. Try out and try to reconstruct the site using tables. And if you do get to frustrated, remember practices always good. And the next lesson you're gonna be more in tune to why we need gifts and spans and how they help solve the problem and allow us for more modern website design, so it's coming up next. 19. 15 HTML Block and Inline Elements: So we're lucky to be moving on from all those endless tables from the last lesson. And when it came to the mid two thousands to the late two thousands, we were looking at different ways of applying styling. So the endless tables were out and dips and spans were in. Essentially, there's two different types of content in two different types of elements. They could be in line or they can be block content. So with dibs, they are block content and with spans they are in line content. And the difference is that the spans give us the ability. So we refresh it, the spans gonna disability to be in line. So if you line up a bunch of spans together, and if you line up a bunch of dips together than ever see, the big difference is that the dips take up that full block of content. I'm also going apply some styling to the def so I can update the table styling to be the Div styling. So you can see where the borders are for the dips and the dips essentially take up that full block of content. So even if you expand the size of the page. It's taking up that full block. They take up the full with. So they're also a div as well as paragraphs. So they take up the full with. So they're also blocks and along with the new HTML five elements that are more semantic. So it means they have more meaning within the names of the elements, and we are gonna be looking at those in the upcoming lesson. They're also going to be blocks and then it comes to in line. Elements can be within line within the text so they don't mess up the text structure and you can easily create a tag, a span tag and using the dips and the spans. This is where we brought styling into website design because they gave us the ability to create a container element that we could use in order to identify within our HTML code. And then we could accordingly apply styling as needed. So in line elements and a lot of the text ones such as the small are in line display properties, so they operate essentially the same way that we see with spans. They just simply are in line with the text so there's no distinction, and there's unless the change of the font is different, you can't really tell that there's a separate element tag that's wrapping around that particular part of the text so it doesn't have any additional properties, and images are in line. We saw the image gets placed in line so it doesn't take its own full block within the display. It's in line as well. And if you don't want any additional properties, if you just want a strict block level element, then you use a div. And if you want a strict in line, define a section of the content that you can use a span. And the way that these are used afterwards with styling is that we can apply a class attributes, and we can distinguish between the different dibs using classes and then apply styling at the top to those lives so that we can see the different the different elements that we can select them from the page. Let's also do one more for the span so we can get a better feel for how the span displays and I'll do quick refresh so the spans don't have any additional styling or spacing, and the dibs take up that full line and that full block off code. That's a that full block that's available within the display area, and classes can be acted in as attributes, and then you can use them to identify them within styling. 20. 16 HTML5 Semantic Elements: Hey, now we're finally caught up in Welcome to the present, where we're using HTML five semantic elements in order to help organize our document content and also communicate to the browser, the different meaning and the different sections of the code. So the semantic just means that it's easier to understand what the tag names are Originally , what we were doing is that we're creating dibs, adding in classes such as header navigation articles, a side footer. So all of that was previously being done with Web development. And then along came HTML five, and they allowed us to have more meaningful elements. And these are all still block elements, so they just behave the same way as dibs. They're really interchangeable, but when you read the code, they have more meaning within the code. So when you are developing, it is encouraged that you use semantic elements in order to create sectioning within your content, so that just as we have the body and the head section of the website, there's articles there sections there's a sides, there's navigation, so most websites will have a main navigation area code. They'll have a mean section and a lot of them will have multiple columns on the site so that it's just be referred to as a side. And then the styling takes care of the positioning and where we're g