HTML & CSS: Building Responsive Websites For Beginners | Jonathan Grover | Skillshare

HTML & CSS: Building Responsive Websites For Beginners

Jonathan Grover, Developer / Designer / Creative Technologist

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
56 Lessons (10h 40m)
    • 1. Trailer

    • 2. Web Fundamentals

    • 3. Getting Started

    • 4. Document Structure

    • 5. Text Formatting

    • 6. Images

    • 7. Links

    • 8. Validating HTML

    • 9. Site Publishing

    • 10. Introducing Tables, Forms, & Iframes

    • 11. Tables

    • 12. Iframes

    • 13. Forms

    • 14. Video

    • 15. Prep for HTML5

    • 16. HTML5 Semantic Elements

    • 17. Metadata

    • 18. Styling the Front-end

    • 19. Setting up an External Style Sheet

    • 20. Type Selector

    • 21. Color Systems

    • 22. Font Shorthand

    • 23. Web Fonts

    • 24. Class Selector

    • 25. ID Selector

    • 26. Descendant Selector

    • 27. Psuedo Selector

    • 28. Developer Tools (part 1)

    • 29. Element Display

    • 30. Box Model

    • 31. Box Aesthetics

    • 32. Floating

    • 33. Prep Layout

    • 34. Applying Box Properties

    • 35. Styling Tables

    • 36. Styling Forms

    • 37. Styling Iframe

    • 38. Centering Content

    • 39. Applying Box Shadow

    • 40. Applying Gradients

    • 41. Styling the Logo

    • 42. Styling Main Sections

    • 43. Styling Details Section

    • 44. Creating Column Structure

    • 45. Developer Tools (part 2)

    • 46. Positioning Techniques

    • 47. Z-Index Layering

    • 48. Sprite Rollovers

    • 49. Styling Navigation

    • 50. Styling the Social Media Bar

    • 51. Responsive Layout Techniques

    • 52. Setting Up Local Responsive Testing

    • 53. Prep HTML for Responsive Layout

    • 54. Applying CSS3 Media Queries

    • 55. Adding PHP Mailer Script

    • 56. Resets, Grid Systems, & Templates

11 students are watching this class

About This Class

There is a new updated version of this class located here:

This class is perfect for anyone with a great website idea or just an interest in learning how to code. This is a beginner-level class so if you have basic computer literacy and an internet connection, you're all set. Learn at your own pace. 

You'll leave this class with the skills to create your very own stylish, professional, and responsive website.

What You Will Learn

  • HTML and Web Fundamentals. You'll start with text editing basics, headings, images and linking between pages.
  • Tables, Forms, and Iframes. After learning the essentials you'll learn how to add more elements like tables, forms, and Iframes to your pages.
  • HTML5 Elements. You'll add HTML 5 semantic containers, metadata, and media to your pages.
  • CSS Fundamentals. You'll use CSS to create a style sheet that will allow you to fluidly change your pages contents.
  • Building Page Layouts. You'll build with columns and utilize the box model.
  • Positioning and Sprites. You'll use z-index and sprites to creat advanced layout features. 
  • Responsive Layout. You'll create responsive site design that allows your site to alter its style and content positioning based on the size of the device it is being viewed on.


What You'll Make

Spread throughout the course are Code Challenges. Code Challenges are opportunities for you to put what you've learned to practice by coding on your own. A continuous project will be built out of the code challenges adding more to your site project with each challenge.

Handouts and Resources

You will be provided with extensive handouts and suggested reference materials to continue your learning even after the course.

More courses from this instructor at:



2. Web Fundamentals: - Hi. - Welcome to the first set of slides, - HTML and Web fundamentals. - Sit back, - relax and we're going to discuss how the Web works, - the development process, - workflow habits. - And then, - later on, - we'll do an exercise to get to know some different HTML elements. - First, - let's talk about how the Web works, - and hopefully this will give you an idea of how what we're learning fits into the larger - picture of the Internet. - We're gonna talk about requests in response, - rendering in the browser, - local verse remote and some differences between front end and back and development. - First, - let's talk about request and response. - So imagine that you are sitting at home and you get in front of your computer and you say - I'd like to go to this website so you type in the domain name into your browser how stuff - works dot com and then you hit return and your computer connects to the Internet, - and it talks to this guy over here, - which is a DNS server, - D n A. - Stands for domain name server Dina service. - We're kind of like operators of the Internet. - They don't actually hold any website files, - but they will tell you how to get to the specific computer wherever it may be in the world - . - So that way you can connect to it and then get the website files you're looking for. - So DNS servers. - They talk to other DNS servers all day long, - and they're keeping track of associating a domain name with something called an I P. - Address. - Um, - and I I p address is very similar to the address that you have on your house. - It's basically a way of identifying the location of a computer wherever it may be anywhere - in the world. - Eso any computer that's connected to the Internet has an I. - P address. - Even the computer that you're on right now has its own I p address. - So when you type in how stuff works dot com, - you ask the DNS server. - If it knows the address of that hosting server and this domain ing actually doesn't, - it says, - Well, - it's not in my database, - so I'll ask another DNS server. - And this one does know it says, - Actually, - yes, - that's in my cash that maps to the I P address. - 70.42 point 251.42 So this first DNF server says thanks all cash that information as well. - In case someone asked me again in the future, - Then I'll know what to tell them, - and it sends you that information. - So now your computer knows the specific address of the server that you're trying to connect - to, - and that's his green arrow. - Here is showing that connection between your local computer and this remote hosting server - and hosting servers, - which are represented back here by these blue towers. - These are the computers that are holding the actual web files, - the content that is then being, - you know, - downloaded to your computer and rendered in your browser. - So whenever you have the i P address, - you're making a requested into that specific hosting server and it sends back a response. - And this starts a conversation back and forth between your computer and the remote server. - So you ask, - you make an http request and you ask for something like the home page, - and the server sends back a response in the form of content. - And this is text code, - that is either html CSS or JavaScript. - So in this class, - that's what we're gonna learn. - We're gonna learn to write the HTML and CSS code or the content that's passed back and - forth between the remote server, - the Web server and the viewers browser. - Let's talk a little bit about local verse remote now, - so the term local refers to the computer that's in front of you right now. - Local computer is something that you can touch that's right before your eyes, - and that's supposed to remote. - Where remote refers to a Web server that's a remote location somewhere else in the world. - So whenever we're, - you know, - producing whenever we're in our our production phase, - we're always working on our local computer, - and we're previewing it in our browser on our computer. - So we're working locally. - We're previewing it locally in the browser, - checking our work. - This way we can make sure everything is exactly the way we want it before we publish it and - put it up on to a remote server. - So you're building your website on your computer, - your writing HTML and CSS code. - You're previewing that code in your browser and you're making sure everything looks the way - you want. - Maybe you're correcting typos, - changing colors, - things like that. - Then you decide OK, - I'm ready to put this up on the the remote server. - So then we're gonna use a process called FTP, - which is file transfer protocol to put those files or upload them onto the Web server. - And now, - because this Web server has a specific domain name, - an I P address associated with it, - people from all over the world now can view and access those files. - And then, - at any point, - if you'd like to change or modify those files, - you can always get them down off of that Web server. - So you have the newest copy on your local machine as well. - And you can do that by downloading or getting the files, - bringing them back to your local computer. - Let's talk a bit about the differences between front and Web development versus back end - Web development. - So in this class we're going to be doing front end Web development only. - We're going to be learning to write these 1st 2 which is HTML and CSS. - Now. - The main difference is that thes front and program programming languages are actually - guests. - We should say markup languages HTML and CSS are all being rendered client side, - which means that they're being rendered in your browser. - Your browser is interpreting that code and then rendering it, - which allows the website to appear now. - That's in contrast to back and Web development, - where all of the programming languages on the back end are being interpreted by the server - on the server side. - So, - for example, - ruby, - PHP, - python, - Java and node, - which is a version of JavaScript on the server. - All of these programming languages are working to update objects. - Um, - you know, - interact with the database and eventually render the HTML and CSS files that air then - passed to the front end that air past your browser. - So that's the main difference between front and development and back end development. - So as you start out to make your own projects, - a good start to creating any website is a brainstorming process. - So along the way, - feel free to grab a piece of paper, - a pen or a pencil, - and just start sketching out the ideas of what you want to build before you actually start - to code. - A lot of people like to make a flow chart or flow diagram where you basically map out what - pages will exist and how those pages will link to other content. - This is a good example of a hand drawn mock up, - so you can also take and draw out the individual pages and sort of make decisions about - where content will go. - And this is going to save you a lot of time. - Because instead of having to move code around or add or remove code, - you can make up your mind about the overall layout and what content you'd like to exist on - a piece of paper on. - And it's a lot faster to erase something or redraw it than to make a lot of changes in your - code. - So I think it's a good idea before you start any project to kind of make a mock up of what - you think that the site pages will hold and sort of where you imagine that you'll be - positioning this content. - There's also digital mock ups you could make online. - One site I like is called Mockingbird, - and these sites will allow you to make mock ups that air perhaps more suitable if you need - to present this information to a client before you start coating, - there's even templates in mock up sites specifically for tablets and mobile devices as well - . - One of the first things you want to make sure when you get started on any new project is to - create a folder that's dedicated to just that website or that Web project, - and we're always going to keep all of our files and sub folders that are related to that - site in that folder. - So we always call that a parent folder or a root folder. - This one here is named site. - Normally you'll name this. - Whatever the name of your project is. - For example, - if I was building a website for a waffle factory, - I might call this folder something like Waffle factory dot com or something like that. - Now, - inside of this main parent folder or root folder, - this is where all your sub folders will be. - All of your images for your website will be nicely organized into a folder. - Any special fonts you might be using could be organized. - There is well, - all of our CSS, - which is going to be the style of our website, - is gonna be located in a folder, - and all of our Web pages are HTML. - Pages will also be inside that main parent folder there. - And this will keep everything nice and organized on, - and we're going to try and avoid ever having ah, - file for our website existing outside of that main folder. - So in the next exercise, - we're gonna jump in and talk about HTML syntax. - We're going to look at document structure of building a basic page. - We're gonna learn to create text elements, - and we're gonna learn to create images and then links between our pages. - So go ahead and move on to the first exercise. - Feel free to browse the rest of these slides using the pdf link below, - and it will have content that will review all of the things we go over in the exercise. - Thanks. 3. Getting Started: - Hi. - Welcome to the first exercise 1.1. - With any exercise, - you're always gonna want to start by downloading the zip file I provide for you. - And that's going to be the source files that we're gonna be working with for each exercise - . - So just for this first time, - I'll show you how that works. - So I've I went ahead and downloaded that zip file, - which is called 1.1 dash html dash fundamentals dot zip and I had to un compress this. - So is it file is a single file that's compressed, - kind of like smashing a bunch of files and folders in tow. - One file, - and then we had to un compress it here. - I just double clicked on it on Mac toe un compress this and it spits out a folder like this - You may need to, - depending on your computer, - your operating system meaning toe like right, - click on it and say something like un compress or on archive or extract might be another - way that might be written, - but at any rate, - you have tow, - unzip or un compress that file, - and that should turn into a folder like this. - Um, - and this is all of the files. - The source files that will need to start this exercise. - Basically, - this is just containing some images here, - which are some images of some shoes. - Why? - Because the first, - um, - project we're going to build is going to be a she website. - Okay, - so I went ahead and move this into a folder on my computer. - You might want to decide where your files for your for this class will live. - You can even put them on the desktop if you don't have a suitable place. - What I did was I like to put all of my website files in a folder here. - I have my sites folder here, - and I went ahead and created a folder name specifically for this class HTML and CSS from - scratch. - And you can see inside of there. - Is that that un compressed zip file there by 1.1 dash html dash Fundamentals folder. - And inside of there, - we just have some images, - as I said. - Okay, - so that's a good start is to move these files to a location where you'd like them to live - on your computer 4. Document Structure: - And the next thing we're gonna do is we're gonna bring up our code editor, - So I'm gonna go over and I'm gonna launch sublime text. - And when sublime text starts, - we just haven't untitled file here. - And what we want to do first is we're gonna want to open up something called The Sidebar, - which will on the S enable us to see our project files and folders. - So I'm gonna go up to the View drop down menu, - and I'm gonna go to side bar and show sidebar again. - That's under view. - Sidebar, - show sidebar. - I go and click that and that will bring my sidebar up here. - And the nice thing about this is that I can drag this folder that I had you guys download - 1.1 html fundamentals. - You can drag that and drop that into your sidebar, - and you can see there that here is my images and that that particular folder. - Okay, - so to start off with, - we just want to create our home page. - So I'm gonna go up to the file drop down menu and say new file, - and that's gonna create an untitled file like that, - and we're gonna just save this file right off the bat, - I'm gonna say file safe and we're going to name this file. - Something very specific. - Now, - all the other files on your website, - you can really name them whatever you like. - Um, - this particular file, - which is the home page, - we have to name this index, - which is all lower case I n d x, - and we have to give it a file extension of either dot HTM or dot html. - Either extension is fine. - So the reason why we have to name this index is that whenever ah person who's trying to - view your website is making a request to that remote server, - the remote server by default is going to pass back the file named Index to them. - And that's why they'll see that first. - Hence why this becomes the home page or the splash page. - Some call it so we want to make sure that we save this in the correct location. - Remember, - we always, - always, - always want to save all of our site content into that single root folder. - So in this case, - I've created a folder here, - mines under sites, - and then I have one for the name of the class HTML and CSS from scratch. - And there's my 1.1 folder and I can see my Images folder sitting in there. - Some of the name this index and save this right into that exercise folder like so out. - We can see that the index pages sitting inside of that folder Okay, - so index dot html, - we're ready to go. - So let's start writing out some HTML code. - Let's just dive right into this thing. - If you'd ever like to make your text larger, - you can use, - um, - control plus and minus on windows or on Mac. - It's the command key, - and the plus or minus key will make them larger. - So if you're typing text, - you can change the size of it like that. - I'm gonna make this tax nice and large for you guys, - and this will help with ice strain. - Also, - if you're coding really late at night or for long periods of time, - um, - and you can save your back posture in your eyes by making the code a lot larger. - Okay, - so first thing we're gonna do is we're going to learn about html syntax, - So html stands for hypertext markup language and mark up language is what they do is they - provide a series of elements that surround content and then define that content for the - browser. - So we have to tell the browser, - Hey, - this text is a heading. - Hey, - this text is a paragraph. - This is an image and this is a link. - So to get started, - let's learn a very important element called the HTML element. - Now all elements are made up of starting tags and ending tags. - Some elements actually only have a starting tag, - but most of them oftentimes have a starting and ending tag. - We'll talk a little bit more about that later on. - So all of these tags are made up of angle brackets, - which is a less than symbol. - And then the name of the tag and then a greater than symbol like that name is the opening - tag. - Except they have afford slash in front of it, - like so. - So what we're looking at here is something called the HTML element and the HTML element. - What it does is it tells the browser that all of the code came between these tags. - Here in the middle is HTML code, - so you can see here. - This is the HTML element, - and it describes the content in between these tags as being HTML code. - This is called the starting HTML tag, - and this is called the ending HTML tag. - So again, - the starting tag is the same as the ending tag. - It just has a Ford Slash in front of it like that. - And that's very common. - Okay, - so that's a pretty good start. - Basically, - Now we know that we've told the browser were starting to write some html here, - and we're ending our HTML here, - so everything that goes in between will be the rest of our document. - Now, - I'm gonna add one more tag right at the top of this. - Um and this tag is also an important tag. - This is a very unique tag, - and it's called DOC Type. - And to write the doc type tag, - we do less than symbol exclamation mark. - And we write the word doc type like that. - Now, - what Doc type does is Thisted AG is going to tell the browser which version of HTML were - running. - So the way we tell this, - the browser that we're creating not just a HTML document, - but in html five document is we put a space after the word doc type and we write HTML like - that. - And this says to the browser, - this is an HTML five document. - Now, - if you look back at previous versions of HTML or X html, - you're gonna notice that these doc type tags can actually be quite long and lengthy. - They can actually go on and on. - Um, - sometimes, - for example, - in html four or three. - These were, - um, - almost a sentence long to describe to the browser that the particular document was, - You know, - that mark up version for HTML 51 of the inclusions of it, - which is a nice new features that it's very simple. - We can just right, - doc type html, - and it sees it as an HTML five document. - Okay, - great. - So now we've told the browser, - um, - this is an HTML five document, - and here is the start of my HTML code. - And here's the end of my HTML could next. - Let's talk about the two main parts of any HTML page. - So every html pages broken into two main sections and one is called the head like this - slash head will close it and then another one is called. - Another part is called the Body. - So we have the head and the body, - just like you and I have a head in a body. - So inside of the head section, - what specifically goes here is content that's meant for browsers, - search engines and devices. - So this is like machine code that goes here. - This is information, - metadata and content links that are related to, - um, - how this page should display what sort of search terms should be associated with this site - , - which we'll talk a little bit more about later on. - But mainly everything in this section is going to be things that we don't actually - physically see in the page. - They're just things that are meant for other machines and devices. - Now, - that's in contrast to the body now in the body section. - We actually have all the physical viewable content of the page to go ahead and leave a note - to herself about this to teach ourselves about this. - Let's actually learn another element called the comment. - So this tag uses thelancet than symbol exclamation mark and then dash dash. - Okay, - it starts off looking similar to the dock type, - but actually has two hyphens that follow it. - Um, - and you can see here that all of the code now below this this opening comment tag here has - been great out. - So here we can write. - This is a comment, - um, - on Lee, - I Well, - I'll just say I can see it, - uh, - in the code, - but this will not appear in the browser. - So a comment is a great way to leave messages to ourself. - Sometimes people even use comments to disable sections of code on the page and these air - Really? - Ah, - good habit to label things and sort of, - um, - leave messages and comments About what? - Certain parts of the coder doing. - So now that we've learned to create this comment, - which again? - This starts with less than exclamation dash dash is how you start the comment the way we - end the comment as we use dash dash greater than you actually notice if I forget to include - the ending tagged there that it actually comments out all the rest of the page. - So I have to say I'm done. - Say, - hey, - browser. - I'm done making a comment by saying dash dash greater than this is a unique tag that - doesn't have the slash in the closing. - It just ends like that. - But this guy is really the only one like that. - Okay, - so now that we've learned to create a comment, - let's write a little comment to herself about what happens in the head section. - So let's go ahead and write the head. - The head section, - uh, - contains info for, - like, - search engines and the browser and is not seen by our viewer, - and we'll end that comment there. - Now. - These comments can be single line or multi line. - They can be on a single line like this, - or you can hit return, - and you can actually make these comments span to multiple lines like so Okay, - let's also write a comment for the body section. - So unlike the head section, - which we don't actually see ah, - the body is the entire viewable area of the web page. - Um, - you know, - for example, - in this section, - um, - we can actually see things like texts, - uh, - links images and all types of media. - So in that comment there, - so these air the the main sections of in HTML pages the head and the body. - Let's just learn, - um, - let's start by learning one tag that we can place inside of the head section and this guy's - called title so we can give our page a title here. - This particular website is for a shoe company. - So for the title, - I'm going to put the name of the company here. - I'll say Z H W shoes just kind of a generic name. - I made up, - and we'll put some information that will be kind of helpful for search engines. - Will say, - this is Ah, - bargain. - Um, - footwear wholesales like that. - And this page is the about page. - My home page is going to start off with information about the company. - So I'll just go ahead and say about us. - I think that and we will close this out slash title. - Okay, - so this is going to do a few things. - Um, - number one search engines can see this, - and they're going to say, - Hey, - this is a site that has content about shoes, - um, - and for wholesaling footwear on. - And this is also a page of about them or about the company. - The other thing that title does is that it's also visible on the browser tab. - Let's actually take a look at this. - I'm gonna go ahead and save this page. - So we're gonna say file save or you'll probably get in the habit of doing. - Um, - command s on Mac. - Or you could do Control s on windows to save. - All right. - And let's go ahead and bring this up in the browser. - And we can just drag this guy into chrome here. - We'll go ahead and find that file. - It's called Index, - and I'll just throw that in there. - Okay, - So first of all, - this page is white. - It's totally blank. - I haven't put anything in the body sex and yet, - but one thing we can see from the head is up here at the very top of the browser tab, - you'll be able to see the name of the website, - and it runs out of space. - There starts office, - huge W shoes. - Bargain footwear, - huh? - Cool. - So that's a good start. - So that's one thing that we can see in the head section. - Is this tab here? - Aside from that, - you're not going to see physically see anything else from inside the head section. - In fact, - this little white rectangle here that is my browser window that's the body. - That's where we're going to see things that are located in the body. - So let's jump back over to the code then and let's write some more and you will zoom out a - tiny bit like that. - Okay, - so this is a really basic HTML page is we have the doc type of the top. - Then we have the HTML tag and then nested inside the HTML tag. - We have the two main sections of any Web page. - We have the head in the body, - so we already saw that we can place the title in the head. - Let's go ahead and write something in the body section and see if that shows up. - Let's go ahead and write Hello world here inside the body. - So I'm gonna go ahead and save that And I did a command after you can go file save and I'm - gonna come back to the browser and important thing is I need to refresh always need to - refresh because I'm saving the code and then in order for the browser to see it, - we have to reload it. - So I'm gonna go to this little refresh arrow here to reload the page on Mac, - You can also hit command are to reload the page and more than likely on windows in your - browser is gonna be control. - Are control and the R Key. - So hit command are. - And there we can see the word Hello. - World appeared there in the corner of the browser window like that that a little larger - there. - There we go. - So it's nice and easy to see. - Okay, - Excellent. - So this demonstrates that the body is where we can physically see content in the page. - So we learned about Doc type HTML tag the head in the body on. - We also learned to write comments in the code, - which only we can see. - You'll notice it. - This comment here that says the body is the entire viewable area. - The Web page. - We didn't see that when we went to the browser. - We only saw the text we wrote outside of the comment, - which is hello world and sublime Text agrees this out for us so that we can see clearly - that that that this code here is a comment 5. Text Formatting: - Let's do another experiment. - Let's go inside of the body section and I'm gonna hit return a few times and I'm gonna say - hello, - Moon Next. - And then we'll go ahead and save and will come back to the browser and see what that did. - Okay, - that's interesting. - Um, - let's look here at the word. - Hello, - Moon. - Hello, - world. - How come when I wrote it in the code here I hit return and I put this one on top of this - one. - So world hello World should be above hello Moon. - But then, - strangely, - in the browser there appearing side by side. - Well, - the reason why is that the browser ignores Whitespace. - It's on Lee really concerned with the relationship of these tags, - right? - These each Timo elements made up of this starting tag and ending tag. - They are surrounding content and they're describing to the browser what that content is. - So this title tag us describing to the browser that this is the title of the page. - It surrounds this content and tells the browser how it should interpret it. - So if we want to make this hello world and hello moon appear side by side, - we would have to use a specific tag, - and in this case we actually want to make them appear one on top of the other. - So we'll have to use a specific tag for that as well. - So if I want to say that this is one paragraph and then below it, - there is a separate paragraph. - I have to surround this content with the appropriate element. - Okay, - so let's go to use the p tag like this. - So the paragraph element is made up of this opening p tag and ending p tag like this, - and it surrounds this content Hello world and tells it to be a paragraph. - So we'll go ahead and add an opening and closing p tag to There is well, - and then we'll save that and we'll come back to the browser and refresh. - Awesome. - So now hello, - World is on top of Hello, - Moon. - It sees this as one paragraph in. - This is a separate paragraph. - So html involves, - um well, - a decent amount of memorization. - We're gonna have to learn at least these common tags. - I'll teach you that you'll get quite a lot of use out of high frequency HTML tags to - surround content. - Okay, - so that's a good start. - We've learned to create paragraphs. - Um, - perhaps we'd like to create headings on different size texts around the page. - So let's go ahead and start off by creating heading here at the top of our page on. - And this is going to be the largest size heading, - which is an H one. - And we're gonna go ahead and give this the title of our company, - which is easy. - H W is the name of our shoe company, - and we'll also create kind of a subheading, - um below that a little bit smaller text and we'll say shoes. - So the company is CHW shoes like that. - So let's go ahead and save, - and we'll come back and refresh and check. - Check that out. - So there you can see the heading for the page, - the H w ah, - the subheading shoes. - And then we have two paragraphs here. - So headings air really important. - Not only do they actually physically change the size of the text, - but also search engines semantically see these as being having mawr importance because this - is a heading for the content below, - then the search engine gives extra importance to the level one heading. - And then h two, - which is a Level two heading, - which is slightly smaller, - has slightly less importance to a search engine. - Now there's actually six levels of headings. - There's H one through H six. - Um, - oftentimes I really Onley end up using, - you know, - age 12 maybe h three or H fourth the most. - But there are six possible sizes and levels of importance for headings starting at each one - , - which is the largest and the most important, - going down to age six, - which is the smallest and least important of the headings. - So we can create headings. - We can create paragraphs. - Let's also look at, - um, - place filler text. - So let's say that I'm building this website for my shoe company and I don't have any, - um, - any actual tax to put in there. - Maybe I'm waiting for my copywriter to bring it to me. - Or maybe I personally haven't written it out yet. - So what we can do is we can actually play some filler texting. - They're using some warm ipsum text and sublime text has some tools built right in to do - that. - So I went ahead and just erased the tax and place my cursor in between the opening and - closing P tag there, - and we're gonna go up to tools and two snippets, - and we're gonna go ahead and go to this one that says warm ipsum and click, - and you can see what that did. - Is it place this kind of nonsense type in there? - It's sort of just place some filler text in there for me, - which is a nice way to get started. - And if I wanted have two paragraphs, - I could go ahead and paste those there like that. - Okay, - excellent. - So let's go out and save this and let's go back to the browser and make sure that worked. - And there you can see my heading. - We'll make this normal size again. - There you can see my heading and you can see Ah, - thesis subheading and the two paragraphs here, - which have a space in between them and then now are containing that place filler text. - So you'll get a lot of use out of these paragraphs and headings. - Um, - so we know that paragraphs put a full line space between lines of text, - But what if I just wanted to go down a single line for example, - what if, - after this word here, - Laura MIPs Um, - what if I wanted to push everything else down? - Just one line? - Well, - I can do that using another tag called the BR Tag, - which creates a line break, - which looks like that now this tag does not have a opening and closing tag in the way that - P does for paragraph B, - R or line Break will simply move everything after this PR tag down a single line return. - Let's take a look at this and make sure that worked there. - Let's go ahead and save this and we'll come back to the browser and refresh. - And you can see there that all of the tax jumped down after the word Laura MIPs. - Um, - it just moved down a single line, - whereas between these paragraphs here, - we have a full line in between. - All right? - Not terribly. - I I'm not terribly exciting, - I realized, - but the's air, - all the basic fundamental building blocks. - So this will be really important as we move forward. - Okay, - so that's good for this page. - Let's call it a day on this index page. - We have the name of our company and some paragraphs. - This will be some information about our company, - but let's go ahead and move on to some other text formatting elements. - So let's create another page here. - Let's say, - for example, - that aside from my home page, - I'm gonna have another page that's going to be a catalog of all the shoes. - So let's go ahead and say, - file new. - It's a new file here and let's save this right off the bat will say file save. - And we're gonna put it inside of that main root folder there for our website projects. - And I'm just gonna name this one catalogue like so we'll call this one catalogue dot html. - Don't forget the appropriate file extension. - So now that I have the index page, - all these other pages, - I can really name them whatever I like. - A few things to note here is that you're not gonna want to put any special characters. - Don't put any exclamation marks at symbols, - question marks and things like that because he's actually have reserved meaning in a - website URL So we're not gonna want to use any strange symbols. - Um, - overall, - you're just gonna want to use, - um letters and numbers lower case or upper case letters and numbers. - Also, - we don't really want to put spaces in between, - um, - our file names, - for example, - if I wanted to call this one shoe catalog, - I wouldn't call it Shoe Space catalogue because that could cause potential errors later on - , - When we're linking two things, - best thing to do would be to either put hyphen, - shoe, - hyphen catalog or underscore shoe underscore catalog like that are perfectly fine. - In this case. - I'm just gonna call this file catalogue. - That will be good enough so we'll save that. - And now I have two files here, - and each one has a tab. - This one's called Index, - and this guy here is called Catalogue. - It's OK, - so let's see if you guys can remember the the file. - So feel free to shout out this first file that we always put at the top of every HTML - document. - What it does is it tells the browser what version of HTML were using, - so feel free to shout out the answer. - That's right. - This first tag is called DOC type. - And how do we tell it that this is an HTML five document? - We just say doc type html just like that. - Okay, - then we need a set of opening and closing tags to tell the browser that this is an HTML - code in between these opening and closing tags like that. - So we use the HTML tag and then inside of that, - what are the two main sections of any HTML page? - That's right. - The 1st 1 is the head. - This is the first part of the HTML page, - and the next one is the body like that. - And you guys have probably noticed that I'm in Denning. - Whenever I place some other elements inside of an element like this, - I always hit Tab in Dent like that. - Um, - now that isn't necessary for the browser. - The browser doesn't really care if you make the code pretty like this. - In fact, - you could even put all the code on one line in the browser would still render everything - because the browser just concerned about this relationship of what's inside of what and - what tags are surrounding what content. - But what I do is as a best practice. - I like to in debt whenever I nest or I go inside of another element like this, - and this makes a code much more readable and easy to see this relationship of what's inside - of what? - Okay, - great. - So we also learned an element for putting the title of the page so well that there will say - Title Um and this one will have a similar title to the last one. - Let's go ahead and call this one Z H W shoes. - And what did we right before we wrote? - Um, - bargain footwear? - Wholesales on this page is the catalogue page, - so I'll just go ahead and write out the word catalog like that. - And then don't forget to close the title element like that. - We'll see less than symbol slash title to close that out and then inside the body, - this is the viewable area of the Web page. - We'll put an H one in here that says E h W. - And we'll put ah subheading says shoes. - Oops. - Starting to type a little goofy there. - Okay. - And then inside of here, - maybe we'll have another paragraph with, - like, - place filler information. - You guys remember how toe add the place filler text. - Of course, - you could type out your own paragraph if you want to tell you about a paragraph about the - shoe catalog will go ahead and just go to tools snippets, - and we'll throw in a warm up. - Some snippet like that, - and I don't just make some place filler tax cool. - Um, - good to go. - Let's learn about some other text we can put inside of here. - Um, - let's go ahead and create a list. - So I make a little comment here, - and we'll just say that this is a list and the type of list this is actually is it's called - on a Nordic list. - So occasionally you'll have the need to create Ah, - a list of items and maybe items that are in no particular order. - Perhaps so, - for example, - will say, - Let's imagine that we're creating like an archive for our shoes so you can look up all of - the shoes. - So maybe I'll create a heading first for that, - and we'll go ahead and say shoe archive, - and then we want to create um, - just ah list of items that are going to to represent all of the shoes for a particular year - . - I'll make another will make a subheading here for the year. - Actually, - we'll go ahead and say, - um 2013 like that slash h three. - Okay, - so to create a non ordered list, - what I do is I use a specific tag called the UL Tag UL standing for a Nord erred list, - and it closes like that. - Slash UL. - Okay, - and then we're gonna go ahead and go inside of the UAL tag here. - And every list element here, - like this one, - requires that we put another child element inside of it. - We nest. - Another element inside of it called El. - I would chance for list item. - So here we can put some different list items. - In this case, - we're going to put all of the different. - Um, - all the different months for this year are going to be a list. - So we'll say that this will be for December and will make another list here. - Well, - just make a few months. - We don't need to make. - All of them will say this one's for November, - so this will be kind of like our blawg archive of all the different shoes. - Let's create another list item here will say another list item. - Here is the month for the month of October. - Okay, - great. - So let's go out and save this and then let's come back out to the browser and we have the - index page open up here and we haven't yet linked to our pages. - So what I need to do is, - if I want to see that catalogue page, - you'll have to drag it into the browser. - So I'll go back to that file called Catalogue, - and we can just drag and drop that here. - Cool so we can see there is the catalogue page and the index pages separate tabs there. - Okay, - so for this page, - the, - um, - the catalogue page here we have the shoe archive, - which has a year and then each year will have list items so you can see here when we used - the UL, - tag it in dense and creates a bullet for each L I, - which is list item. - We have December, - October, - November. - Okay, - so let's go back into the code and let's see some other things we can do with lists here. - Let's imagine that we want to sub nest another list inside of here. - So let's say, - for example, - if they click on October something like that, - we want to display another list inside of it So sometimes we have the need to create Ah sub - list of items related to that list item. - So what we're gonna do is open up the list item like this and go inside of it and we can - actually create another on ordered list if we like like this. - So I'll just go ahead and say, - slash ul and I'm nesting. - Just a be clear and show that this is all inside of this list item for October and inside - of October. - We're gonna make a sub list item for different days. - I won't do every day in the month will just do a few just to give you the idea So we'll say - . - Oh, - when we click on October, - we want to also be ableto click and refer to shoes for this particular date in October. - So we'll say that there's a list item for the 17th of October and another one here for the - 18th of October like that. - Okay, - so this creates that on ordered list. - Let's see what happened there in the browser. - If I come back and refresh, - we can see what happens. - There is we get further in Denning, - and now, - instead of filled in solid bullet points. - This sub list for the 17th of October 18th of October have this open lips here. - Okay, - so 2013 has months under it, - and then those month can even have specific days like that. - So this is a good example of some content you could use, - um, - appropriately, - with a non ordered list on order. - This could also be things like a grocery list. - You could put different kinds of fruit or meats that you want people to use in a recipe. - Something like that. - If it's something that doesn't happen in a particular order, - where you don't need numbering like 1234 and your content just to have a bullet point, - you can use that ul element. - Okay, - great. - So there's are on ordered list. - Let's go in and take a look at another type of list, - which is in a situation where you do want it to be ordered so we can make an ordered list - here, - okay, - down below, - so we'll make a different order list. - Um, - let's say we wanted to make a list for top of brands, - so I'll just make another heading here, - and I'll say top brands just to make some text above the list, - and we'll close out that Level three heading there. - Okay, - so to make an ordered list, - it's actually the same as the A Norden list. - Except that instead of using UL to make an unaltered list, - we use ol to make an ordered list like so. - And ordered lists also are filled with list items inside of it that break up each - individual piece of the list. - So we'll just make up some, - um, - make up some fake companies or some fake brands will say, - um, - Bradley, - Bradley and Brown will be the name of a brand. - If you want to use the and for sand symbol instead of a nd you can use shift in the number - seven like that now that is gonna light up pink and the code sublime Texas letting us know - that in this case for the symbol, - it would be most appropriate to use something called the HTML asking character that - represents this So we can do that by saying and symbol, - and then putting in some Limbert some letters or numbers that represent that ask you - character so we'll say, - and a MP semi colon like that. - This is a special asking term here that refers to the and symbol in HTML code. - So you might be curious what it what are these other asking symbols that are available, - and how do I know what to type for them? - If you go to your browser and we can open up another window here and we'll just type in - HTML, - ask E. - That's a S C I I it comes up with these different codes and references. - Now this is a table. - And, - um, - you can see here that, - for example, - to create this this double quote mark like this, - we can say and qu ot semicolon and it will create this character, - you can also say and pound Symbol 34 is a numeric code that will work for it. - So there's different ways you can get these guys to bring up most of these air. - Pretty common. - You could just copy and paste them from text, - like just literally copying your pacing and simple like that, - or finding, - you know, - using your keyboard to type them out. - However, - there are some certain specialized keys that you're goingto need the asking characters for - let's scroll down through and find a couple ones that are maybe a bit different. - Um, - for example, - this is, - you know, - you might have to make, - like the symbol for pounds or euros, - um, - or some other demarcation. - This one is like a little question mark inside of a diamond. - Some of these are symbols in mathematics, - and you may even see accent characters based on a particular language. - So here you can see different characters whom lots and NBA's, - um in different types of accents that will be used for different languages. - Here you have other things, - like the registered symbol. - So if you want to create the registered simple you can do and RG semi colon. - There's also things like copyright, - which is and copy, - which will take a look at a bit later. - So asking characters are nice if you have the need to create specialized symbols, - so this creates kind of like a little stylized and symbol there that's attractive. - So that's one of our brands. - You'll notice that one difference between the A Norden List and the ordered list is when I - used the ol tags for ordered list. - We get a number here instead of a bullet point. - Okay, - so let's go ahead and move on. - Um, - let's write some other list items here. - I'll just do a few more so you can see how these order So we'll make up some other brand - names. - Will see Sampson Travelers. - It's probably a good idea that I stick to my job and I don't try and make up brand names so - we'll make another one up here. - We'll just say kitsch. - Groove is another top brand that we're selling like that. - Okay, - awesome. - Good to go. - So here's top brands 12 and three. - So the nice thing about using ordered lists is that if we change our mind and we want to - stick another Brandon here, - in between Samson and Travelers, - it's just gonna re number for us automatically. - Okay, - great. - So these air some text elements that will be useful for you. - I'm not going to teach you every single HTML element, - but I just want you to know these high frequency ones to get started. - These air ones that you'll get a lot of use out of, - and I do encourage you to go through and check out the provided handouts in the links that - all place, - um, - all post for learning mawr HTML elements. - So there's dozens and dozens of HTML elements, - and it will be good for you to familiarize yourself with the different possibilities of how - you can describe content to the browser. 6. Images: - Now, - a few more elements that I think will be really good for us to learn about right off the - bat are in addition to style izing text. - We also want to learn how to create links in images. - So let's go ahead and jump back to the index page here. - And let's say that we want a place, - um, - an image here to represent kind of the the vibe of our website to show our logo any image. - So I've created a picture already for us, - um, - called intro pic, - and we're gonna place this into the site page and we're gonna place it underneath this - heading here that has the name of our company will say that we want this image to go - underneath are heading, - but before the paragraph. - So I'm just gonna open up some space in the code to do so Now, - just like the other elements here have specific tag names. - H one and H two and P images also have their own specific tag you have to use now an image - looks like this. - I m g. - Now the image tag doesn't have a closing tag name. - It just starts like this. - I m G like that and this image element itself when you just place it on the screen. - The browser now knows that we want to put an image there, - but it has no idea what image we're trying to load there. - So we actually have to tell it which image that we want to load now. - In HTML, - you can pass in options to modify and change elements by placing in something called an - attribute into the opening tag. - Now, - attributes are never seen in the closing tags. - The closing tag always is just a slash and a repeat of whatever the opening tag name was - like this. - But inside of these opening tags were free to put options and or attributes. - So in order to tell the browser where this image is located, - we're gonna go ahead and have to put a space after the name image. - And we're gonna use the attribute called S R. - C. - SRC stands for source were telling it the source location of the image and the way we - provide it with a value as we use the equal symbol and quotes to surround the value. - So this thing here that's in this opening I am G tag is called an option, - and this part of it here is called the Attribute name. - And in here we're going to place the value, - which is the location of the image that we'd like to load. - Now, - whenever I want to load an image, - I have to do some detective work. - I have to basically be aware of the file that I'm currently in, - which right now I'm inside the index dot html page and I'd like to load an image. - But I have to be very specific to the browser. - The browser is not very smart, - and we have to tell it exactly where that images, - and we have to give it locations from the specific file that we're currently in. - So right now we're on the index page. - Let's imagine for a moment that we are standing on this index page. - Imagine that you're two feet are planted here on the index studies TML page, - and if you look around, - what do you see? - You see that there's another page called Catalogue and you see that there's a folder called - Images, - but we can't see inside that folder unless we go into it. - Imagine that images is kind of like a building in this sense. - So we have to walk through the door of this building called images, - and that's like opening up the folder. - Now that we're inside the Images folder, - we can now see all of these images that we want a link to. - So the first thing I have to do is I have to tell the browser to go into the images folder - so that it can see inside of it. - So to do that, - I write the name of the folder. - I say images, - and then I make a Ford Slash and now we're inside of that folder. - Let's write a comment to remind herself that so any time we say a folder name slash, - this is the equivalent of going inside the folder. - Well, - what if I want to go outside of a folder? - The opposite of this situation is if I want to leave a folder, - I can see dot, - dot, - slash so dot dot slash is the equivalent of go outside the folder, - the current folder that you're in, - right? - Okay, - so these air really the only two things you need to know to navigate or to tell the browser - how to navigate from the current file. - You're on to another file or folder. - So we want to say, - Hey, - browser. - I want to create an image. - So we use I m g. - And then we put a space and we say, - And by the way, - this image is located inside the images folder, - images slash and the file we want a load is called Let's look it up just to make sure we - have the right name is called Intro pic, - not J. - Peg. - So this is case sensitive. - I have to spell it exactly the same in mind has an underscoring it. - So I have to say intro underscore pick dot j peg like that and that's gonna load that image - there. - Okay, - Now, - there is one other option that we always want to include inside of an image element. - And this is something called alternative text. - And we use the attribute Ault lt to give it some alternative text Now for the alternative - text. - We're going Teoh, - right? - Something I will say, - uh, - logo picture. - It shows a man with legs crossed, - so I'm giving a description of the image here. - Okay, - so What is this, - uh, - old text all about here? - So all text serves a few very important functions. - Number one, - if you're image link is broken. - If for some reason this is a misspelled and the images not appearing in the browser, - then this all tax will appear in its place in most browsers. - So if the image link is broken, - people can at least read what they were supposed to have been seeing there. - Which is? - It's a logo showing a man with its legs crossed. - Actually, - that's not too great of a description. - Maybe you could come up. - We could come up with something better later on. - But at any rate, - we're giving, - like, - a simple description of that image. - Okay, - so this intro picture shows this content the other. - The other thing that the all text is very important for is for search engines. - So search engines, - they don't have eyes, - they can't actually see the picture of the image. - But however they can read the whole text, - and that will be helpful for the search engine. - Now, - the last thing and probably the most important of all of these things is that if I'm a - person who is visually impaired or I'm blind or have some trouble seeing on the Internet. - What I can do is I can install something called a reader. - And the screen reader, - which is built into most browsers nowadays, - will actually read the text of the Web page allowed to the person who is browsing the - website. - So if I had some problems seeing the image, - then the browser reader is actually gonna read this text. - To me, - it would say out loud logo picture shows a man with legs crossed. - Okay, - so let's go ahead and save this image and let's come back and view this guy in the browser - . - So this one is on the index page, - which is index dot html. - If you don't have that up in your browser, - you may need to go and drag that file from your folder in there. - Okay, - there we go so we can see our images appearing there. - So we created a header. - There's my H one. - Here's my age to Here's my paragraph text, - and here is my image, - using my the I M G tag. - All right, - so that's a good start. - Let's look at some other things we can add to the image here. - Um, - these were some other optional things you can add inside of this image tag. - We can also add something called Title and Title will appear when we hover over the image. - So let's leave a message. - If someone hovers over and this is optional, - you don't have to have this year. - I'm gonna say, - Welcome to the H W shoes, - Something like that. - Lots of typos today on and then we'll go ahead and save that, - and we'll come back into the browser and refresh so immediately. - I don't see this the title, - but look, - what happens if I hover the mouse and leave it there? - It brings up a small little caption. - It says Welcome to the H W shoes, - so you may or may not want that there, - but you do have the ability to add that using title, - people often add these titles, - toe links or images to give mawr information about where that image might link to. - So, - for example, - you might have icons or maybe, - for example, - social networking icons, - and you can add a title to them so that when you hover over the little F for Facebook, - it will say, - Follow our visit Facebook page. - You can have the little T, - so when you hover over it says Follow on Twitter. - Something like that. - Okay, - Another common attribute people add. - That's a good idea for images is you can add the width and height of the image now by - default. - It party made this have the, - uh, - it already set this up to have the correct width and height, - but I can actually put in the number of pixels of the image here. - And that's going to be good if the layout changes. - Because, - for example, - let's say that this image link is broken or the images missing, - then well, - actually, - let's go ahead and show that if I collapse this if I change the sea to an X, - and I misspelled the image on purpose there, - this will actually break the image, - and it will change the content around it. - So if I refresh this, - then it collapses and this content moves up. - Now, - if I were to put in height and width here into the image that will then make the image take - up the size that it's supposed to. - So if you want to check that out. - You can go to the image itself. - In Windows, - you can right click and save properties on Mac. - You can go to get info, - and it should tell you information about the image. - So in this case, - it's telling me the dimensions of the image are 9 20 by 500. - Quite a large image, - actually. - For the intro page s Oh, - this is with 9 20 like that and height of 500. - So this link name is still broken. - I misspelled it on purpose. - There will come back and refresh, - and we can see the whole Texas appearing Their logo picture shows a man with crossed legs - and we see this little broken image icon which nobody really likes to see. - So let's go ahead and fix that. - But you can see the heightened with prevented the layout from changing like that. - Um, - so we'll change this back to intro pic like that, - which is the correct way of spelling it. - You can see our image pops back in there and a nice little spray paint logo. - All right, - that's a good start. - Now, - later on, - we're going to be building a responsively out so that this image will scale in size - depending on if we're viewing this on a desktop or tablet or a mobile device. - So we're gonna end up specifying this height and width using CSS a bit later so that we can - make it flexible. - So for that reason, - and for that reason, - Onley, - I'm actually going to remove the width and height off this image for now. - But I just wanted you guys to know that those are some other attributes that you can put in - there. - Okay, - So great. - We know how to create headings. - We now to create paragraphs, - we know how to create a non ordered lists and ordered lists. - Um, - we also know how to create comments and media in the page. 7. Links: - Now let's move on to creating links. - Links will allow our users to navigate between the pages. - So right now we just have the index page here, - which is our home page. - And we also have this catalogue page. - I think we're gonna go ahead and create a few more pages. - Let's actually create three more, - and then we'll have all the pages ready to go for the rest of our site on future exercises - . - So let's go ahead and just goto file and we'll say a new file and that will create an - entitled file. - We'll go ahead and save this, - and we'll make sure that this is saved inside of our site folder and we want to call this - next file. - Um, - I'm to call this one. - Contact died. - HTML. - This will be our contact information page, - and I'll go ahead and say, - save like that, - Um, - so we can start writing out the basic document structure, - which you'll remember from thes previous pages. - Here we have DOC type HTML head and the body tag etcetera eso for For this one, - I'm gonna show you guys a trick you can do. - Although it's good practice when you're starting out to type everything out, - so you'll remember it. - Um, - you know, - when you get to the point where you're comfortable on you, - remember, - you're confident you remember all of these tags that make up the basic document structure. - You can always use things like this, - the tools up here, - the top. - You can go to snippets. - And if you click the first snippet here that says html Look at that. - It lays out a lot of those tags there for me. - So I could just come in here and then put in the title. - And this one's the contact page saw just right Contact like that. - Okay? - And we also learned about the DOC type tag at the top, - just doing a quick review there. - So, - Doc type HTML is the external five doc type. - There's a few other things we can adhere that will also help the browser. - Let's talk about an attribute we can place inside of this opening HTML tag so we can - specify a language here like this. - We can say e en for English, - Um, - and if you're interested to know all of the language codes, - for example, - yes, - for Spanish, - fr for French etcetera. - You can go ahead and look those up. - You can Google that if you Google um html laying ice. - So I s o codes. - I so codes it will come up with a large list of different languages. - You can check out another thing that's nice for the browser. - Aside from telling it, - you know, - the version of HTML, - which we talked about before, - and giving it a language for the main content on the page. - We can also add a meta tag appear, - and meta tags oftentimes contain information for browsers and search engines. - In this case, - what we're going to do is we're gonna give another tag called Meta with a tribute of - character set. - And we're going to tell it that the text characters we're going to tell the browser any - devices interviewing this page that these text characters in the page are utf eight and - coded text characters. - So this is the preferred HTML five kind of set up there tonight to sort of have a blank - page. - Um, - I'm gonna go ahead and put in the things that will be the same on every page as with all - our other pages we have heading and we also have the subheading was shoes, - I believe. - And then we had, - like, - a paragraph. - So there's gonna be some different things will go on each of these pages. - This is the contact page in, - and future exercises will actually be placing in a contact form here and a embedded Google - maps of people can see the location of the company and things like that. - But for now, - we're just going to create a paragraph and we'll just write something in it just so we can - see a change from page to page saw just right, - contact here. - And that will work for now. - I'm gonna go and save this page. - We can just go ahead and duplicate this page a couple times. - I'm gonna go to file, - and I'm just gonna say, - save as And I'm gonna call this next one instead of contact. - Why don't we go ahead and save this one as pricing? - So we're also gonna have a page. - It's gonna be sort of a pricing chart. - We're gonna insert a table into this page and later exercise. - So it doesn't say pricing and save that and for pricing, - we're gonna change a few things here. - Well, - we'll write the word pricing here in the title and just so we can see the change on each - page enologist right, - pricing in the paragraph here and save that. - And let's see, - we have one more page will do a file save as, - and we'll go ahead and duplicate this page as well. - Um, - let's call this one sales. - This is gonna be a page. - It's going to, - uh, - we're gonna list all of all of the sales for our site. - So here will go ahead and change this to will say on sale for that and will say like, - um, - sales here for the paragraph just so we can see a change when we navigate between the pages - and again, - we'll be putting more content in here later. - This will be just enough to get us started. - Okay, - so those are all saved. - Um, - let's jump back to the index page here. - I just click on index. - You'll notice in sublime text. - If you just click on a file, - it will change that file. - And if you double click, - it will actually open up an additional tab for the file. - It's usually when I'm working on the site. - A lot of times I'll just go through and double click on each of the files I intend to work - with like that. - And then I can switch between all of these tabs up here, - which is kind of nice. - You could even drag and drop and move these around. - Another cool thing you can do is you can split the screen. - For example, - on Mac, - you can dio command option and then a number and the number you hit at the top of the - keyboard. - The keypad will determined how many times it splits. - So if I say command option to it will split the screen into two, - and that allows me to drag, - um, - these tabs from one side to the other so I could actually view multiple files at the same - time, - which is kind of nice. - So that's Ah, - command option, - and then a number at the top. - Your keyboard. - You can play around with that. - You can do command Option three. - It'll split three times Command option for will split four times, - although that's kind of narrow to read the code there. - But you could see you could actually have, - like four different files open in each tab like that, - which would be kind of nice. - And if you want to get back to the normal, - you just do command option one. - So that's command option on Mac on Windows. - I believe it's control option, - But you might have to look that up in order to Yeah, - you know what? - I'll go ahead, - and, - um, - I'm gonna figure that out, - and I will post that in the information underneath this video for you guys. - Okay? - So, - back Teoh, - back toe links, - though we want to do now, - is we want a link between all these different pages. - So I decided I want my links toe live just underneath this. - Heading here on each of the pages will have, - like, - a navigation bar we're gonna place here, - okay? - And we're gonna put some links here. - I'll just write a little comment that these air links up. - So the specific element that we used to create links is an anchor element. - It uses the letter A like this. - It has an opening and a closing A and anything that you surround with this opening and - closing a tag is going to become a link for example, - we're actually going to link to this texture. - First, - will create some text that says about and we'll turn this text into a link and by - surrounding it with this a tag. - So a stands for anchor link. - But if it's helpful, - you could also think of the of the word action A for action. - Because what this does is, - um, - it creates an action where when you click on something, - it changes to a different page. - Right? - Okay, - So aside from you, - no surrounding text with these anchor links these these a elements here, - we can also, - um, - we can also surround images. - So, - for example, - this image down here, - if I wanted this image toe link somewhere when I clicked on it, - I could also surround this guy with a tags like that. - This particular image I'm not really interested in this one linking anywhere, - So all erase it off that, - But just to show you that you can, - in fact, - you know, - just turn links themselves are Excuse me, - you can turn images themselves in the links. - Okay, - so for this first try, - we're just going to turn this text into a link so surrounding this text with this. - A tag tells a browser that it's supposed to be a link, - but we still haven't told the browser where we wanted to actually navigate to where we want - it to jump to when we click this link. - So in order to do that, - we have to add an option here into the opening a tag and this attribute is called H Ref. - A trough stands for hypertext reference, - Um, - or hyper reference. - Remember, - these pages are HTML pages, - which is hypertext pages or hypertext markup language pages. - So this is referring to referencing a specific HTML page if that makes it easier to - remember their H ref. - Okay, - so what we want to do here is we want to put the, - uh We basically want to describe to the browser where it should go, - and we have to do that, - you know, - relative to the page that were on. - Currently we're on the index dot html page. - So if I come over here and look in my folder, - I can see that I have Everything's inside this main site folder that's called HTML - fundamentals. - Um, - this time we're not linking to any images, - so I don't have to worry about the folder name there, - and it looks like all of these HTML pages are in fact just living side by side in the same - folder. - So since there just hanging out in the same folder, - I can literally just type the name of the file like that. - Now again. - If if these pages were in a different folder, - you could type the folder name to tell the browser to go into the folder and then find that - file. - And again, - if you wanted to go out of folder, - you could do dot, - dot, - slash, - which will, - which will exit the current folder and look for a file or another folder. - In this case, - we don't need to do either of those because they are just hanging out living in the same - folder. - Great. - So that's the first link. - That's all we need to do to get that one toe work, - and I'll go ahead and create another one of these will create one for each page. - That's H ref. - You'll get used to writing that a lot, - and I'll go inside here and we'll put some text. - Let's see, - the next thing we're gonna link to Is the sale page, - Saul, - just right on sale. - And then here, - the actual physical HTML page want a link to is called sale dot html Just like that. - Oh, - you know what? - Ah, - here. - I called it sale, - but here it's called sales Within s. - Now, - that's gonna create, - um, - a problem. - These names have to be exactly the same. - So this is actually gonna break the link here. - So if I call this sale here, - I better make sure to call this sale over here. - I think what I'll do is I will right click on this file and also rename and then down here - at the bottom, - I can erase that s and hit return, - and that'll fix it. - It's a good thing I caught that, - um, - when I did, - because that'll actually break the link. - Okay. - Nobody wants broken links. - That's no fun. - Okay, - so we're gonna go ahead and just make a couple more of these just to give you the idea of - how it works. - The next thing we're gonna do is after sale is the catalogue page, - which we already built, - and that links to catalog dot html Just like that. - And these are case sensitive. - Um, - so here in the file name. - If it was a capital C in the file name, - I would need a capital C there. - Sometimes the browsers is more forgiving locally on your computer, - on the computer in front of you, - you might, - you know, - accidentally use a different case sensitivity like a capital C Lower Casey. - And for some reason, - it will still work for you locally. - But then when you uploaded to the server, - it may not work. - So it's always good to be aware of the spelling of things and the case, - whether it's upper case or lower case. - Okay, - uh, - next let's move on to the next page. - So after catalogue, - we're going to link to a page called pricing dot html. - And the text there is called Pricing and we'll close whips will close that link there, - and we'll do one last like here. - I think that'll take care of all my pages. - I'll show you guys Ah, - shortcut also is. - Instead of typing out the tags, - you get used to them. - If you just hit the letter of the tag like the letter A. - And if I hit control space bar. - It comes up like this and I can hit return, - and it will Right that out. - For me, - there's some pretty neat shortcuts that you can do for code completion in sublime text. - Um, - let's see where we out here. - The last page is called contact dot html. - Like that, - and we will link to the Texas is contact. - Okay, - now. - So this demonstrates how to use a relative path to other files on your website. - You may be wondering, - hypothetically what if I wanted to link to another file somewhere else on the web, - for example, - What if I wanted, - you know, - to make another link that went to another website, - For example, - if I want a link to The New York Times, - I could put in the full girl, - which is why times dot com like that, - Um and why times now I'll probably end up removing this link in later exercises because we - don't really need our shoe website Toe linked to the New York Times doesn't make much sense - , - right. - But nonetheless, - I wanted to show you guys that if you put in the name of a file on your website as long as - the browser has a clear view of it. - You know, - if they're in the same folder, - you could just put the name of the file that's called the relative path. - Now, - if you ever want to link to something somewhere else on the web, - you can put in the full domain name like this, - which is called the Absolute Path. - Here. - This is the absolute your URL path each you do have to put the full http colon slash, - slash and then the full name of the website. - So now when I click this text and White times, - it's actually going to link to another website. - Okay, - so by default, - if you just use h ref, - um, - and you click on either an image or some text with the anchor tag set up like this, - what's gonna happen is which were all quite familiar with is that the screen will change. - We'll be looking at one page, - will click a link, - and it will switch to the other page now, - in situations where, - instead of changing the page that you're currently on, - if you'd like to force the browser to open a new tab, - a new browser tab or a new browser window. - What you can do is you can use another attribute in here, - which is called Target. - So I'm gonna go inside of this. - A tag here, - this last one for The New York Times. - And after this this age ref here, - I'm gonna go ahead and come in here. - We'll zoom in a bit and hit a space and will say Target like that. - There we go. - Target is the name of the attributes, - and then we'll go ahead and put some quotes. - Notice. - If you have multiple attributes, - what happens there is you just simply put a space. - We can even put this on its own line, - so it's easier to see. - How about that? - Okay. - So you can see here that if I have multiple attributes, - we have a single attribute here. - And then there's a space. - Um, - and then we have another attribute there. - Okay. - And attributes like these are only in opening tags, - right? - Never in the closing tag. - Okay, - so, - under target, - we can tell it to target a new blank browser tab by saying underscore blank like that. - The underscores important. - You have to put that in there too. - This is a specific value that the browser understands. - As instead of targeting self, - the default is target self, - which looks like this, - Um And that means that when you click a link it whatever window you're in, - you're gonna lose the view of that page. - But it's going to switch to the view of the next page or you're linking two. - Um, - and if you'd like to do that, - you really don't have to specify. - So for these ones up here, - I didn't specify a target. - So when I click, - the's just gonna change the page. - However, - for this one, - I specified target blank, - and that's going to open up a new browser tab. - Let's go out and save this. - And what we're gonna do is we're gonna copy and paste these links to all the other pages - here, - So I'm gonna highlight all of this code from Ah, - for me, - it's online. - 17 here. - All the way to line 19 line numbering may be slightly different for you on your exercise - code, - depending on how much you wrote or how Maney line returns you did. - But right here in this section, - I'm just gonna copy all those links we just wrote so I'm gonna highlight those and say edit - . - Copy what? - You can see the shortcut. - There is command See on Mac or control See on Windows. - And we're gonna go to the other pages on the site. - Let's go to contact, - and we'll go underneath the heading and paste those links there and save It's go to the - sales page and we'll go underneath the headings and paste those links and save and let's go - to catalog and we're gonna go under the headings We're gonna pace those links and save and - looks like we're all done there. - That's the Well, - this is only four pages. - It looks like I'm missing something there. - We don't have pricing yet. - That's what I'm missing. - Okay, - we're gonna go into pricing the last one and go under the headings and paste and save. - So now, - all fought. - All five of my pages have these links, - um, - pasted into them, - and we can then save you to the files and we can go back to the browser now. - And you can see on this tab your, - um, - on the index page and you can see our nice little image we created here. - Remember? - We always have to refresh the page to see the most recent changes we made. - So you're always saving your file and then coming back and refreshing. - Um, - don't be afraid to save, - because even after you save, - you can undo. - If you make a mistake, - we can go to edit, - undo, - um, - or command Z on Mac or control Z on Windows so you can always get back to where you where. - I can undo that like that and fix it. - Okay, - so we're always saving. - We're going back to the browser and we're gonna refresh. - And there we go. - I see my links here, - which are appearing beside my image, - will talk a little bit more about that later. - Why these air appearing side by side? - Um, - so let's go to test these. - So we'll go to on sale here. - I'll click that cool and it says sales here. - Now I'm on the sales page, - will click catalog. - There's the catalogue page we built with our own ordered lists and ordered lists. - We'll click pricing and it goes to the pricing page. - There we'll click contacts and we go to the contact page and then last but not least we'll - click on the Y times link which you can see, - opens up a new tab here and takes us to the New York Times website. - So because I said target blank, - Um, - like this that is causing a new browser tab open The thing. - The thing that's nice about that is that, - um I can still get back to this site. - I haven't left this site here. - I can just use that browser tab. - Right. - So again, - if I click, - this opens up a new browser tab here. - We can just close that and get back to the site. - Were already on. - Okay. - Good job, - everybody. - You just built your first web page. - Um, - your first website. - So this is really what Web pages are, - um, - websites are essentially, - you know, - linking between several web pages. - Um, - And although this one's not very attractive looking yet, - we're gonna learn more and more and push it further so we can build really professional, - polished looking sites. - Okay, - so good job. - What you're gonna want to do now is you're gonna want to move on to the first code - challenge where you're going to start building your own site pages 8. Validating HTML: - let's talk a little bit about validating our code. - I'm just gonna go to an example. - Page. - This is the pricing data you see and all pays that we just recently finished in the last - exercise. - And when you're working on these exercises and on future exercises in this course, - you may run into problems where things aren't displaying correctly in your browser. - Um, - or perhaps even when you go to build your own site project, - you'll be writing some code and maybe something won't be displaying correctly or things - won't be positioned in the way you'd like them to be on the page. - So a good way to check that is to validate the code and see if the code is actually written - properly. - So one way we can do that is we can use an online validator. - So what I'm gonna do is I'm gonna highlight all of the code on this page on the pricing - page here. - I'll just click and drag. - Or you can dio select all command a on Mac or control A on Windows, - and that will select everything. - And then we're gonna copy this code, - which is of course, - command. - See on Mac or control see on Windows. - And then let's go jump over to a browser and I'm gonna go ahead and search for validator - dot w three dot org's like that. - So this brings up validator dot w three dot org's and this is at the w three dot org's - website, - which is the W three c, - the World Wide Web consortium, - which sounds like a kind of like a creepy cult. - But actually these are These are people who are maintaining the HTML language, - so they're determining the rules and the proper way of writing and the proper usage for - HTML and CSS. - So if you ever I want to know for sure how to write something or how to use an element, - you can always come here and check up there, - check out their documentation at w three dot org's. - Right now, - we're just gonna be using their online validator. - You can see their several ways to validate. - One thing you can do is you can put in Anat address here so I could upload my site and my - site could exist in my domain name like my site dot com. - And I can just paste in that URL and have it validate pages from that site. - Um, - you can also validate by file upload so I could choose a file from my computer and I could - test the code. - That way I could validate the code from there. - We're gonna use this third tab here this says, - validated by direct input. - And you can see them. - There's a little box for copying and pasting, - um, - and weaken. - Do edit paste, - which is a command V or on Mac or Control V on windows. - And that'll paste your code in there so we can see the code we recently wrote, - and I'm gonna go ahead and click check. - And the good news is we wrote that correctly. - It says this document was successfully checked as html five. - Any time you get a green bar at the top than then you did well, - everything's working properly. - Um, - otherwise, - if you get a red bar here, - then it's going to tell you that there's something wrong in the code. - Um, - let's let's create that scenario. - So currently everything's written correctly, - But let's say that I was typing in a hurry and let's say I forgot to write this closing - slash so it kind of looks like there's an opening age two and then another. - H two, - this is a very common mistake. - Is Oops. - I forgot to put the closing slash here. - Another common mistake is for getting too close an element. - So what if I forget this closing tag on the paragraph like that? - So here's two errors thes air to really common errors that I see. - So let's go. - They re save this file and well, - copy. - This year, - I'll copy all this code, - and we're gonna go ahead and bring that back into the validator here, - all right? - And we're gonna pace, - and then I'm gonna click the Reeve ality button down here. - Oh, - that time it found errors in the code. - So it knows there's something's wrong. - Um, - so says Ares found while checking this document. - So let's go see what these errors are here. - Okay, - um and this is the area that I'm really concerned about. - Is this red text here that says output four errors. - So let's see where it's finding these airs at. - It tells us here online 10 um, - heading cannot be a child of another heading. - Interesting. - So it sees this age to tag. - Let's zoom in on that for secular. - This is the first air message. - It says that this age to tag here. - See, - this little red mark cannot be a child of another heading. - So it thinks we're trying to nest, - heading inside of another one. - And it's saying that that's specifically online. - 10. - Okay, - so we can go back to our code here, - and because I have line numbers, - I can go down the line 10 and I confined the issue and say, - Oh, - in fact, - I see what they're talking about here. - I need to have a closing slash mark here, - so I'll change that and then save and we can re validate. - And that'll solve at least one of the errors there. - And let's come back. - And I'm gonna go ahead and paste this code in here again. - I'm gonna race all of it and paste and revalidated. - Okay, - that was that. - I was cool. - That actually worked that time. - It looks like we got away with this p tag. - Um, - although really, - it should have thrown in air on that as well. - Um, - and of course, - if you ever visually see these things occurring, - you're gonna want to clean it up, - fix it up yourself by putting in that other closing tag. - So whenever you validate, - it's going to, - you know. - Usually it will tell you the exact line where it's seeing the issue. - But other times you have to go to that line. - It tells you to go to, - and you have to backtrack and check the code above it to see if something else previously - is disrupting the validator on that particular line of code. - So that is a good tool to use to troubleshoot and make sure your code is written correctly - . 9. Site Publishing: - Hi. - Let's talk about site publishing after all our hard work. - At the end of the day, - let's say we'd like to take our website files and we'd like to upload them to a remote - server. - That way we can preview the files or we can share the files with World from our domain. - So, - of course, - this requires going out and purchasing a domain name and Web hosting space from a - particular company. - And I've suggested a few companies that I've had good experiences with and then have some - reasonable deals in the 0.0 set up section in Module one so you can check out those - companies if you don't already have this set up and really anywhere that you can find a - domain name provider and Web hosting. - It's fine to use aside from being able to upload our files so the world can see it. - This also be helpful in this class so that you can post your projects and get feedback from - other people because they'll be able to just go to your website domain to check out what - you've been working on. - So to get started, - we're gonna go ahead and make sure that we have written down the three pieces of - information that we got from our hosting provider, - and that would be our FTP address our user name or user log in and password. - Typically, - most hosting companies will email you this information when you first sign up. - And if you weren't emailed this, - it's possible that you might have to call them or contact them to get this information. - Or they may have given you a user name and password to log into a control panel at their - website. - And usually once you log into your control panel somewhere in there you'll be able to find - this information. - And once you find that information, - you want to write it down. - And then the next thing we want to do is we're gonna launch this application called File - Zilla, - which is going to be our preferred FTP client. - So I'm gonna go ahead and launch file zilla, - and this may look a little bit different on Windows. - This is on my Mac here, - but it's pretty much the same from both. - Um, - you can see that this screen here has all these different windows up here in the top. - We have a window. - That's going to be the request and response information from that. - The servers giving us so it respond back, - like, - cannot connect the or it'll be like connection successful stuff like that. - And down here, - it'll actually tell you the status of a file. - If you're copying it, - you'll see a little loading bar toe, - let you know if the file is copied. - And in the center here we have split into the left and right side, - and the left side is your local file system. - So these air all the files on your computer just in the same as if you were using finder or - your file browser and then over here on the right side, - which is actually blank right now because we're not connected to any servers. - This would actually be the file structure on your server that you're connecting to so - you'll be able to see your local files and your server's files, - and we literally can just drag and drop files from the left side to the right side to copy - from our local files to our remote server. - So this is actually the equivalent of uploading is if you click and drag you know, - just in the same way that you can click and drag files around your computer, - you'll just click and drag your website files and drop them onto the remote server. - And additionally, - you can also click over here in the remote server, - and you can drag and drop files from the remote server to your local computer to download - those files so you can upload and download simply by dragging and dropping. - So we're not connected to any server. - That will be the first step. - We have to connect to our server. - So the first thing I'm going to do is I want to go ahead and go up to the file drop down - menu, - and we're going to select site manager And here, - under this little tab that says my sites. - This is where you can create all of the different settings for different servers that you - connect to. - So these air just different servers that I've connected to in the past. - I'm gonna go ahead and create a new site. - I'm gonna click this button here new site, - and it wants me to name it here. - It's it's currently called New Site, - but I'm gonna give it a better name. - C H W Shoes is the name of this site. - And then if I click on that there, - I can see that I can put in some settings and it will remember these settings for this - particular site. - So first thing I need here is my host. - And in order to connect to my FTP server, - I just put in the domain name that I'm connecting to, - which is Jonathan Grover dot com. - And of course, - this will be different for you and you'll have to again you'll have to check with your - hosting provider to know what you're supposed to put here to connect the FTP for the - protocol. - Here, - you can select between FTP, - which stands for file transfer protocol, - or SFTP, - which is secure file transfer protocol. - Eso sftp may be required. - Certain hosts or certain servers require that you connect with a secured connection. - My provider does not. - I'm just going to use regular file transfer protocol, - which is pretty common. - I'm gonna leave the port blank. - Sometimes you have to put in a certain port number here, - but most of the time you can leave that blank under encryption. - I'm just gonna say use plain ftp and here under law gun type, - I'm gonna change this to normal. - So I'm gonna change it from anonymous to normal. - And here where it says, - user, - this is where you put your log in name or your user name. - So this is where it's helpful to have this stuff written down somewhere, - and then you're gonna want to put in your password. - Fortunately, - you guys can't see mine because it's little dots. - Um, - and then there's a few other tabs. - I'm not gonna fill out anything else, - but just to let you know what these are. - If you go to the advance tab, - you can click, - browse, - and you can select a default local directory. - And what that will do is whenever you connect to this site, - it will automatically load a certain folder from your computer here in the local file. - Sometimes that's nice. - It can speed up the process so you don't have to search around as long, - and you could do the same thing for your server by setting up a default remote directory. - So that way, - every time you connect to the server, - it will go into specific folder. - You want to go into. - Sometimes when you connect to a server, - you'll just see a blank directory, - and you could just drag your files right into it. - Other times there's all sorts of folders, - and there you might see one that says, - Logs that just has, - like, - data from your hosting company in it, - like analytic data about who visits the site, - things like that information about how often you copied files and on what date. - And then sometimes there's another folder that says Public, - which is where you would copy your Web site files or other times. - It's called http or maybe even an HTML folder. - So if you see a lot of strange folders and you're not sure which folder to copy your files - and two, - you're gonna wanna ask your hosting company about that. - So for now, - I'm just gonna leave these blank. - But the main thing you have to have is on this general tab, - and that's your FTP host, - your user name and your password. - After I get that all set up, - I can click the OK button to go ahead and save that, - and now any time I want to visit the site, - I can always just go to file site manager, - and I can see that it remembers that information. - Whenever I click on the name of my project, - here's each W shoes. - It will have all that information there so I can go ahead and click on my site and click - Connect here and you could see up here these air all the commands and responses from the - server. - Fortunately, - mind said directory listing successful here when I connected. - Now, - if you see some red text here that says something like like error, - blah, - blah blah a little usually have ah, - number in some type of error message. - It usually will tell you things like user name or password Incorrect, - which will let you know you're obviously using the wrong password. - Or it might, - you know, - have some sort of strange air message that you just don't know what it means. - My advice is if you get an air message and it's not clear why it's not working, - highlight the air message and cops you're hosting companies tech support or call your - hosting company and read them the air message, - and they might be able to tell you why it's not connecting Fortunately, - mine was able to connect. - You're when? - When you connect. - You might not see this complicated of a file structure actually have all these crazy - folders in here. - But at any rate, - what I'm what I'm gonna do is I'm going to create a folder specifically to put this, - um, - this website in if you just wanted it to be in your domain name. - Like if I just wanted to go to this domain name, - I would just drag it into that root folder. - But I actually want to create. - This is kind of like a hidden site project in a folder that, - like on Lee I know about. - So I created a folder here called CHW shoes so I could actually go toe like Jonathan, - Grover dot com slash CHW shoes and see the files there, - For example, - let me actually remove this directory so I can recreate it again. - Show you how If I right click, - Aiken, - say delete. - Be careful doing this, - By the way, - you can't undo it, - and we'll say yes. - And now it's That one's gone. - Okay? - It's actually removing the files there. - It takes a while. - So if I want to create a new directory in here outside the window and say Create directory - and it's showing me where it's gonna put the directory. - And I'm gonna call this one Z h W shoes. - So I'm trying to make a little hidden director here, - and they're gonna say, - OK, - I should be able to find that directory in here somewhere. - Now, - there it is. - If you ever want to go into a folder, - you just double click on the folder. - If you ever want to go out a folder, - you just double click on this little dot dot folder. - There always be a folder at the top, - called dot dot and if you double click that, - it will take you out of the folder. - So I'm actually gonna go back into that folder right here. - Cool. - And what I want to do that is I want to select all these files over here in one way you can - do that is you can click on individual files and you can hold shift and select them like - that. - You can also select all files by saying command a on Mac or by saying control a on windows - , - and then you can once they're all selected like this blue. - You can just click on any one of them, - and it'll grab all of them that we can just drag this over here and we can drop it. - So by dragging and dropping from my local side to my remote server there, - I could move all those files in there and up here. - The top. - This little bar here is showing me where it's copying those two. - This is telling me if it's copying them successful and down here in this window, - when you copy a file, - you'll actually see a progress bar will show you how long it's taking to move that file. - For example, - if I drag the images over here again, - it asked me. - It says these files already exists. - Would you like to overwrite themselves? - Say, - um, - always use this action and say OK, - and down here you can see it's overriding those files or updating those image files now, - all right, - and once it's done, - it will say file transfer successful On this tab, - it says there were 39 successful transfers, - and if I click that, - it will tell me which files like that and where they were copied to. - If you see anything here under failed transfers, - that means something didn't copy. - And you can, - like, - right click on it. - And you can, - like, - tell it to retry copying it or something like that. - Cute files are the ones that should be like currently coffee. - All right. - At any rate, - you can see these are mirror images. - Now, - this is my local files. - And this is my remote server, - which has all those files mirror images of each other there. - Okay, - Since there's an index page here, - I could just find this folder and it will show me these files on the web now. - So I'm gonna open up my browser, - and I will go to my domain name and had I just thrown it into my my default directory. - They're for my domain name. - I could just go to the domain name itself. - I already have a web site here in the root directory. - So I'm going to instead go to my C h w underscore shoes folder like that. - And there are pups. - My website. - So you should be able Teoh, - upload your files to your server. - And if you don't want the world to see them. - You want to hide it a bit. - You can always create a directory and throw the files into their. - And if you copy and paste this directory into your your project page on skill share, - then other people can go and see the files and give you feedback and things like that. 10. Introducing Tables, Forms, & Iframes: - Hey, - welcome back. - This is slides 1.2 tables forms and I frames. - We're gonna be looking at some additional HTML elements that we can stick into Ah, - the next upcoming exercise. - So will basically be picking up where we left off for the last exercise, - but will be adding into that same site. - Some additional things such as tables, - forms and I frames tables. - You're probably all familiar with any time you have some data and it would be best - displayed using ah organized structure of rows and columns than a table is gonna be your go - to element. - The table element is and made up of this opening and closing table tags here and then - inside of it. - The first thing we do is we decide how many rows there are, - and we use this TR element here to create a table row, - so t r stands for table row. - Okay, - So this particular table we've only built to rose here, - which you can see. - Here's the first set and here's second Now inside of table rose, - we have TDs which divide the table into columns. - So this takes that this row here and it adds two columns to it because I have an opening TD - . - A closing TD makes one particular column and this other TD table divider here creates - another column. - We can also do the same thing up here, - but instead of using TD for this first these 1st 2 on the top row here we use th th dance - for table header. - Okay, - so that's going to enable us to style these guys differently. - So we can say, - Well, - we want the heading to have, - you know, - maybe thicker text and maybe be centered or something like that. - Or maybe the background color of this cell is a different color or something like that. - So we use the table element inside. - We have table rose t r. - And then we have th for table heading or table header and we have TV for the other cells. - The other columns we want to create below. - So you can see here if we if you imagine that we chop off all this stuff to the right and - everything below. - Basically, - we're just building these 1st 2 columns here in these 1st 2 rows, - and this one would be the th the table heading which this person has styled differently, - so it's clear that this is the heading on the top. - We have a darker color gray background to indicate that. - So here is name, - um, - as the first th and thread pitch in millimeters, - which is against the measurement for this particular product. - And then under that we have the next TR, - which is Table Road. - This whole guy here's a table, - wrote this first light grey bar. - And inside of that we have one TD making up this first column, - which is M four, - which is the name of the product. - And then down here we have the measurement for that product, - 0.7 millimeters. - Just look at that again for a second. - Absorbing taking it in. - Okay. - And then the next thing we're gonna talk about is forms. - So we're gonna be adding a contact form eso that the user can type a message in the form - and send it to us, - and it will show up at our email. - Okay, - so in terms of html will need to learn some form elements so we can build these thes form - input fields so that the user can send us information. - Okay, - so The form element is made up of this open opening and closing form tag, - and you can see that there's two required options that you have to put inside of that - opening form tag there. - And this 1st 1 is called Action. - So action points to the location of the file or the route on your server that's going to - accept the information it's expecting to gather the information or collect the information - that you're submitting in this form. - So, - for example, - in this particular case, - there is an input for user name and an input for password. - So let's say they type in the user named Bob, - and they type in the password French fries, - and then they click a submit button. - So whenever this for Miss submitted, - it's going to go to the action. - And it's going to send that information to this particular file, - which is called Log In. - So this log and file on the server is going to know, - then to check the ah, - it's gonna check the user name and password against a database to see if that user exists - as an example. - Okay, - so for ours and our exercise later, - we're gonna be building a contact form, - so it'll be a little bit different, - but we'll still have an action. - Right? - Okay, - So the action is essentially where this information is sent to. - Now, - the 2nd 1 that you have to have here, - Um, - and these can appear in any order you can write. - Method First action second, - but you have to include somewhere within that opening tag, - inaction, - attribute, - and a method attribute. - So method actually stipulates the method that it sends this information to this action - location here. - So there's two main ones that you will work with. - One is called get, - and one is called Post. - Um, - so get it doesn't hide the information. - You can actually see it written in the URL When you when you post using when you submit a - form using the get method, - it'll actually append to the Ural at the top of the browser window. - Those those ah particular values, - those parameters and what value the person typed in for their name and password. - So we'd never really want to use get for anything that's important. - Like, - um, - like, - for example, - you know, - credit card information, - passwords, - things like that you never want to use the method get. - It's much more common to use the method post because it's secure in the sense that, - well, - it's not encrypted. - But it's secure in the sense that this information is at least hidden. - It's not viewable in the http header it all, - um, - and you won't see it up at the top of the your El Bar either. - So this is our preferred method for things like Loggins or even our contact form we're - gonna build. - We're gonna use a method of post. - Okay, - So action is, - you know, - where we send the file Post is telling it the format that it's or the way sort of the - method for sending it there inside the form opening and closing form tags. - Then we have other types of elements that we can place inside their um and we're gonna take - a look at a few different ones as we as we move on. - So this 1st 1 here will talk about is called input. - So this guy has input, - has a type of text, - so each each input can have different types. - You can see this one as a type of text. - This one has a type of password, - um, - so text when you type into a text input, - the user just sees the letters that they're typing in. - So they click inside the input and then they start typing. - They see the text appearing. - Now, - password is different because actually password, - You see little dots. - So when they're typing in the password, - if there were someone who is maybe looking over your shoulder, - um, - it's a library or something like that in a public place at a bus stop, - people look over your shoulder when you type inside of a password box with input with the - type of password, - they see little dots so they can't actually see the letters of your password or the numbers - of your password that you're typing. - Okay, - so that's important is to specify the type of input that it is. - We even have a type down here of Submit, - which creates a button that's a submit button, - so we have type text typed password type. - Submit those air a few. - We'll talk about some more as we move on. - Another really important thing you need to do is add this attribute here called name Okay, - so whenever the person types into this input. - Let's say they type in. - Their name is Bob, - and we submit that it's going to post that information to this file. - Log in dot PHP. - Now, - when logging dot PHP receives that information, - the name Bob, - it has to have a with, - ah of identifying that piece of information amongst the other information. - So we're gonna be sending, - you know, - user name and a password. - Now be giving it a name. - Ah, - like user name or password. - What we're doing is we're labeling that information that we're posting to this file. - So this is basically essentially a variable name called user name that stores whatever they - user, - you know, - whatever the person the viewer of the site types in, - So they type in Bob and that that text string Bob is stored inside of this this variable or - this parameter user name, - which is posted to log in dot PHP. - So name is very important. - And of course, - the name between the different foreman puts have to be different, - Right? - Okay, - um, - this guy here is Ah, - fun friendly thing you can do with forms in HTML five is you can use this attribute called - placeholder and what this does is it will write something in the form and put initially so - you can give people a hint of what they're supposed to type their eso. - It'll actually say user name here. - So the viewer knows that they're supposed to type the user name in this box, - and then when they click inside of the box, - that placeholder disappears, - and now they're only seeing the text there typing there so often times the placeholder text - is gray and will indicate to the user what they're supposed to type their. - And then when they click inside the foreman put box, - the text color will turn to black as they start typing in their user name. - Okay, - and then we have type Submit, - which we mentioned is a button, - and this one has also an attribute called Value. - And that's how we label the button. - This will actually physically put the text log in. - It will write that text on the button that people see in the browser. - So these air some other types of inputs. - We looked at a type of text before um, - we also have a type of password, - which we looked at before another type we have is called T L, - which stands for telephone. - As you probably guessed, - one of the nice things about type tell that's that's useful is there's actually a slight - difference if you're on, - For example, - a tablet or another touch Ah, - mobile device smartphone, - any type of touchscreen device. - Most browsers now are compatible that when they see a type of telephone, - when the user, - um, - uses their finger on like a tablet to click inside of that input box, - the keypad that comes up will be a numeric keypad. - So it's easier for them to put in their phone number because it's all numbers as opposed to - a type of texts. - So when you if you're on a mobile device or any other sort of tablet touchscreen device, - if you click inside of an input with the type of taxi will bring up the Alfa pad, - which is all the alphabet characters, - and then when you click on inside a telephone box, - it brings up numbers. - Okay, - um, - we also have This is kind of interesting. - We have a type of hidden here, - okay, - so hidden when you put a type of hidden, - it allows you to insert a value that automatically gets submitted in the form. - This is, - Ah, - hypothetical situation. - We're saying, - Oh, - this is a person's user idea. - Maybe they're logging into their their bank or to check out their stocks or something. - And we need to know what's user number. - They are, - for some reason, - so we can actually store that inside of value. - So instead of them typing in that information like thes other input boxes, - they're going Teoh, - it's gonna be automatically inserted in there for them, - and we still give it a name. - This has a name of I. - D. - So it's storing this value inside of something called I D. - And because it sets a type hidden, - we won't physically see it. - So this won't be visible in the form, - but it's still passing information to wherever you're posting this form. - Okay? - And we talked about input type. - Submit. - This is also something useful to know about. - If you want to make a form input required, - an HTML five. - You can use this particular word at the end of any form field you want to make required, - and you just write the word required, - which is kind of different than we've seen before. - Normally, - you're placing in a value into an attribute. - This is kind of like just placing an attribute name, - um, - at the end here, - and that will make it required, - which, - actually in the browser will in html five friendly browsers, - that is, - you'll see. - An ah little message will pop up, - indicating that this form is required now, - in order to style eyes this Or to get this to work in an older browser, - we would have to abandon required and we would probably use something like JavaScript and - CSS Teoh validate the foreman puts and visually indicate the required fields. - But here, - if we're not too picky about the way it looks, - we can use the html five required tribute here. - We also have radio inputs. - You can say input type radio, - and this is an example of what they look like. - You have these little bubbles and you can select either male or female. - So it's only one thing for most people, - at least you're probably not gonna system will be able to select both in this situation now - that we're discriminating. - Of course, - in this situation, - we are probably going to select one or the other, - right? - So what we want to do here for this radio button is we want to make sure that they have the - same name. - So here's to radio buttons. - They both have the same name of sex. - But this one has a value of male, - and this one has a value of female like that. - So if I click on male, - then this parameter or this this variable name sex will store the value of male. - And if I click female, - it will override that. - So this way, - this name here will only be either equal to male or female. - That's the only possibility using a radio button. - So and this would be indicated by when you click this. - It'll light up blue inside that little radio box. - We also have check box inputs. - So, - as you can see, - we can say input type check box. - And we gave it the name here. - Um and we have different values. - So we could say, - um, - you can check a box that says I have a bike or you can check a box that says I have a car - so pretty straightforward. - You give it a value and you give it a name and make sure it has a type of check box, - and then you can check those boxes off on a form. - Um, - if for some reason you wanted it to be automatically checked, - for example, - sometimes sneaky people will create forms that have a little box at the bottom that's - already checked for you. - That says, - Sign up for my newsletter or agree to receive promotional things to your email, - something like that. - So if you wanted to, - for whatever reason, - you wanted to make this box checked automatically much in the same way that we use the - required attribute at the end here. - You can also write the word checked as the last thing before this greater than symbol or - this closing angle bracket here, - and that will make the check box automatically checked. - When the user first visits the form, - we also commit drop down menu select menus, - and that's using the select element. - Ah, - so this one here we give it a name and then nested inside of this select element. - We have all the different options, - so you would see a little bar like this and you would click on it And then when this opens - up, - you would be able to see, - um, - small, - medium and large, - and you would have to select a size there. - So the way we make small selected initially as you can write the words selected there, - just like the word checked for checking the check box automatically in the word required to - require any form field, - you can just say selected if you want small to be selected automatically, - so that will be the default in that situation. - Text area is useful for when you have to put in sort of multiple lines of text or a - paragraph of information. - If you want someone to really be able to speak their mind, - um, - or, - you know, - leave a comment, - some type of feedback that's gonna be multi line. - You're definitely gonna want to use a text area instead of a text input. - So this just gets a name, - and whatever people type in here becomes the value. - It's pretty straightforward. - So I frames is the next thing we're going to talk about. - We're gonna insert a Google Maps I frame on our contact page to show where our shoe company - is located. - I frames are also used for, - sometimes embedding videos. - Essentially, - any time you want to load some HTML content from some other place into a small frame on - your Web page, - you can use an eye frank. - So I frame stands for inner frame, - and that's exactly what it is. - It's a frame inside of your HTML page. - It's kind of like a window looking into some other HTML content. - So we're grabbing some H some code on Google's website, - and we're loading it into a small frame on our particular Web page. - So this is an example of an eye frame so you can use I frames toe linked to other pages in - your site. - This is an example of, - ah, - just linking to another page within our own site. - You can also link I frames to other people's content. - So some other you Earl using an absolutely girl like http colon slash, - slash etcetera, - and we can give this a width and height. - Um, - and you can also specify information about whether or not scroll bars appear. - If the content doesn't fit within the size of your frame, - let's go ahead and move on now to the next exercise 11. Tables: - for this next exercise, - we're going to be adding some additional content into our page layouts. - You can see here that for this starter code for 1.2 tables forms and I frames. - What I've done is I've added it's a little bit extra additional text and I've also gone - into some of the pages and also added some images in there now. - So feel free. - Teoh, - look over the starter code and see some of the things I have added. - There's some contact information down here and some links, - Um, - and some new images. - So what we want to do for this specific exercises, - we're gonna go into the pricing page and we're gonna add a table. - That's gonna be ah price chart. - And we're also going to go into the contact page and we're going to add a contact form. - And we're also going to embed Google Maps location based on using an eye frame. - Okay, - So to get started, - you've downloaded the code and unzipped it, - and you brought it up into sublime text. - I just dragged the folder in here and you can see the five pages we built for the last - exercise and first thing we're gonna do is we're going to go into the pricing dot html page - . - Um, - and you can also see that I've added some some new comments here in the code. - So, - for example, - before we have this heading here in the links and I've gone ahead and surrounded this with - a comment that says that this is the beginning of a header section on the page and this is - the end of a header. - So this is going to eventually be a bar at the top of our layout that will have the name of - the company and the navigation toe link between all the pages. - So before we learn about building layouts, - I thought I'd be good Teoh kind of show you guys where where we're headed by just creating - some basic comments to surround things. - So this lets me know here that I'm gonna be putting in a table right here in this price - chart section. - Okay, - So as in the slides, - we learned that the table element is used to specify a table. - That and then we can go inside of there, - and I'm gonna indebted to show where nesting and let's build a few rows. - I'm gonna build a table row here and let's build another table road just below that one. - And it looks like for this example, - we don't really have to get too carried away. - But I think I'll build three or four. - We'll make it four table rose. - So I can actually copy and paste this here like that. - There's my four table rose one here to three and four. - Okay, - so far, - so good inside of here. - We're gonna have a couple of different columns. - This 1st 1 we're going, - Teoh, - create a column that will hold the brand name of the shoe. - Um, - so I'm gonna use th which is table header just for this first row on, - we're going to see that here is a column called Brand. - Um, - I'm gonna make another column next to that called pricing. - They'll have the price of the shoe. - Oh, - let's see. - Will make another one here called tax tax. - All right. - And will make another one here to say whether it's in stock or not. - I'll just write in stock like that, - and I'll close that one out. - Now, - if these air easier to see, - um, - if it's easier to understand side by side that these Air columns you can write it this way - . - A lot of times people will put each of these on their own line because then it's a little - bit easier to see um, - without having to scroll sideways. - Quite a Sfar. - But I tend to put them like this. - It at least when I'm teaching it. - It helps me to understand that this is a row, - and this is a column because it's beside this column. - But you can also, - As I said, - you can do line returns and it'll display properly as well. - Omelets e So we hav brands pricing tax in stock. - And let's go ahead and just do one more Will do order i d. - So I'll make a heading here and we'll say order, - I D. - Says would be like an I d. - Number you would use to order shoes, - I suppose. - And, - um, - let's make these guys using the T d tag so we only use th for the 1st 1 which is the header - . - Um, - so this first column would be underneath brand right here. - We can turn off word wrap, - so quarter i d. - Goes out of there. - So this would be the first column under Brand. - And I'll have to make up a funky brand name. - Let's say, - um, - Fink Erstein is a brand name there. - And we could add another TV. - This one would be, - um, - don't forget to close it out. - This one here between the opening closing tag would be the price. - Um, - so these air quite expensive will make them $97.18. - And for tax will say that the tax is on a sliding scale of, - um, - 15 cents Teoh 30 cents like that. - And the next thing we have is whether or not it's in stock. - So we could say yes, - it is in stock. - Um, - well, - just put a why. - And then the last thing it looks like we have here is something called order I d. - All right. - And this order I d will just make up number. - I'm gonna say 11. - 70 is its order. - I d. - Number. - Excellent. - Now, - um, - I could just copy this and pasted below, - and I could just change the information to speed this up here. - I'll just highlight that and we can come down below and paste and I'll paste this again, - and then I just quickly going in change these values here, - um, - sees the next brand will make this guy called Dolby. - Hopes will be and Washington, - and we'll change the price here. - All right. - And this one will be 15 to just change the tax year to 15 to 32 cents. - Um, - are these guys in stock? - Um, - sure. - Why not those Aaron stock Also, - And then we'll change the order number here on the end, - and we'll just go down and make one more product throw. - Okay? - Warby, - Brixton. - And these This particular brand cost $111 and 42 cents. - I haven't been shoot shoe shopping in a while, - so I'm not sure how much she was cost anymore. - All right, - well, - make this one the same and will say this one's not in stock there to popular will say no. - And then, - um, - for its particular number will just make something up. - Will say 11. - 78 A. - Okay, - Perfect. - So I'll go ahead and save this, - and we haven't used any CSS yet. - We're not going to style this table quite yet. - We will do that in a later exercise, - so we're just gonna see the raw data, - but it should still be organized into rows and columns. - We can save and come back here to our browser and let's go ahead and navigates that page. - That's the pricing page, - and there you can see my table. - So this will look a lot prettier when we when we give these some colors, - each of these cells a different color and add some borders and things and spacing around it - . - But for now, - hopefully this gives you an idea of how to organize information you can see here. - The word brand, - which is a heading, - is centered, - but all of the TD text is by default. - It's some over on the left hand side of the cell, - but it is still organizing these into equal columns like that and Rose. - So this is four rows. - 1234 and 12345 columns. - Let's go ahead and look at the code again, - just for a moment to absorb all of that. - All right, 12. Iframes: - so moving on. - The next thing that we want to look at is we want to go to the contact page and we want to - go into the contact page here, - and we want to add two things. - We're gonna add a map in a form. - We'll go ahead and start off with the Thea embedded Google maps using an eye frame, - something to go inside here where it says in between, - you know, - map and end map on my code. - It is online. - 24 here should be for years as well. - And first thing I want to do is go off to to Google and grab a map so I can go to maps dot - google dot com and let's type in the the address of our company. - Could be anywhere. - Um, - let's say, - um, - well, - we'll say, - Ah, - Hoboken about that Hoboken, - New Jersey, - and probably for your business, - you would put in an actual address. - I'm just gonna put in this place and weaken, - basically zoom in to make this look like whatever we want here. - I'll zoom in a little closer and then I'll center this little A here that has this flag so - normally you would find your business, - and then you would select it, - Okay. - And then the next thing we want to do is we want to be able Teoh, - capture this information and embedded eso at least at the time of filming this, - um, - Google has a link here in the upper left hand corner. - And if you click that link, - the first thing it does is it tries to give you your a link you can link to on the top here - . - If you look down here in the bottom section, - it says paste html to embed in a website, - and they give you an eye frame here. - If you'd like to customise it and adjust the settings of this I frame, - your best bet is to click this link here that says customizing preview, - embedded map and that will pop up a little window like this. - And you can see here that you can select small, - medium, - large, - or you can put in a specific custom with and heights. - Um, - so this is fine. - We'll just leave the defaults here, - which is, - um, - medium, - which is 4 25 by 3 50 That's perfectly fine for the width and height for now. - And what we what will be doing later on is when we start getting into our responsively outs - for different devices, - we're gonna actually change the width of this, - depending on the device. - So for now, - we just go ahead and use this default setting here. - You can also switch between satellite view and Earth view and terrain view. - I'm gonna go ahead and select terrain view because I like that. - Why not? - And then if we come down here, - you can see there's code that you can copy and paste down in this section here so I can - highlight all of this. - It's quite a lot, - actually. - Um, - all this code all the way from here up to here, - and then I'll copy it. - I'll dio command see on Mac to copy or control see on windows. - And then I'm gonna come back in here, - and I can just paste this and here I'm gonna do command V on Mac, - which is, - of course, - control V on windows and paste that bad boy in there. - So that throws the I frame in, - and we can save this and let's go back to the browser and check that out and see if we had - any luck. - It's that guy. - So if I did this correctly, - I should see that map pop up. - Let's come back in here and go to the contact page, - and there it is awesome, - so I can show the location. - People can click this and move this around. - They can select directions. - They can use these tools to zoom in and zoom out and move about the map. - You can also click a link that that appears below. - This is view larger map, - which will take them into Google maps. - Okay, - so many sites give you the ability to use I frames to embed content. - Other examples are YouTube. - You can embed YouTube videos via, - and I frame just by copying and pasting the code. - They provide video as well as another good site for grabbing the video content, - pasting it into your site. - Um, - and there's all sorts of widgets for Twitter and foursquare in all sorts of social sites. - Okay, - so let's jump back to the code now. 13. Forms: - Okay, - so next we're going to create a contact form and you can see I've already created some - comments in the code here to show where that goes. - So go right in between those two comments online, - 30 there, - and we'll start off with our form element, - which is an opening and closing form tag like so Now, - inside the opening form tag, - we have to have two attributes. - We have to specify our method, - which is going to be post. - And the next thing is the action, - which is the file that is receiving whatever submitted in the form right now, - I'm just gonna put the hashtag or the pound symbol in there. - That's just shifting the number three. - This is just meant to be a placeholder. - You could even really leave it blank if you like. - Um, - so later on in a in a future exercise, - we're going to point this toward a specific file on the back end that's gonna actually - process this form and send a email to the desired person. - So in this case, - we're just kind of mapping out only the front end. - We're just doing the HTML involved in getting this form up and running. - So for now, - we don't really have to be concerned about the action. - We're just gonna leave this, - um, - as a sort of Ah, - placeholder. - Okay, - so inside of this form here, - I'd like to put some information I'd like to create a couple inputs, - Um, - so people can put in their name, - their email, - their phone number, - and also a brief message to me, - and then click the submit button. - So I would like to put it in put here they can type into, - and I'm gonna give this a type of text because I want them to put some alphabetical - characters into it. - I want them to be able to type their name here. - So it's important that I also give this in name so that when this when the form is - submitted, - it can store that information into some type of name. - Um, - and although it sounds redundant, - I'm actually gonna call it name because that's what they're writing their I'm giving this - input a name of name. - Um, - And the reason why is this is their This is their user name. - This is the name of the person who's sending email, - actually. - Is a better way of describing that. - And this one, - we're gonna also give placeholder text. - Let's say placeholder, - and we're gonna say, - um, - your name. - Well, - say your name. - Right? - So they know their name goes there. - Um, - how do we make this required? - That's right. - We say required we write the word required at the end there like that. - I think I'll take off word wrapping. - Just scroll over a tiny bit like that. - Okay. - And then we'll go down to the next line and let's create another input, - and we're gonna give this one a type of email. - Okay, - So, - um, - type of email is pretty useful when you're actually trying to get the person's email. - And the reason why is that in html five compatible browsers? - It will validate if it's actually an email address or not, - and it will prevent it from submitting. - If somebody type something in there that doesn't resemble an email address of some kind. - All right, - And maybe, - you know, - maybe email should be required to because we want to use this is like a contact mailer. - And how are we going to know who to message back Unless they're able to put that in? - All right, - let's do another input here. - And this one, - we're gonna do a different type. - Will say this one is a type of tell which brings up the No, - the numeric pad on different devices. - When you click inside this input, - it should bring up the numeric pad by saying type telephone, - and we'll give this guy a name also and to associate it with and we'll say, - phone is how we were worried. - That and then we'll say placeholder and for place older here will say phone, - And we'll also mentioned to them in the placeholder that this is optional. - They don't really have to tell us this unless they want to. - Okay, - and let's see. - So actually, - that's it. - After we have name phone, - email and then after that, - we want them to be able to put in their message. - So what I'll do is all create a text area like that's using the opening and closing text - area tag like so and then inside of this text area. - I'm going to tell it how tall to be. - I'll say it should be at least 10 rows of text. - You know you could hit return 10 times 10 rows of type will fit before we get a scroll bar - to appear, - Um, - and we'll give this guy and name also will say name equals message. - All right, - And then, - lastly, - we will add in an input with a type of submit and that will give us our submit button. - And in order to label the button so we can read some text on it will write the word send on - the button like that, - and that should be good to go. - Let's give this a save and let's come back to the browser and refresh Awesome. - And here we have the I frame map and then down below the form we just created. - So if I zoom in on this year, - you can see it's It's not stylized yet. - Um, - we're gonna beautify this and make it look lovely later, - using CSS. - But for now, - it's just kind of this generic like, - horizontally stacked form so we can click inside of here, - and we can type a name. - My name is Bob. - I can click inside email. - You can see the placeholder text there would disappear when I type, - and we can say my email is bob at bob dot com. - The phone numbers optional, - so I don't have to type that. - If I wanted to, - it would be something like this, - I guess. - And then I can type a message like Hello? - Something like that. - Um, - now, - some of these fields a required, - for example, - if I don't type in a name and I try and click send it says, - please fill out this field. - So this is that html five friendly required attribute that we placed inside there is - telling me I have to fill this out before will submit. - And again, - if you want to be able to stylized this a little more, - um, - you're gonna probably end up using something like JavaScript or J coury plug into stylized - these forms, - which we won't go over in this class, - but perhaps in a future class. - Okay, - so here we have name will fill that out again. - Let's do this one which this one has two things going for its validation. - Number one we have required. - So if we don't type anything and it should say it's required if we also put in an email - address, - that doesn't make sense. - Like if I put in like, - um, - fake out fake out sucka. - And then we try and send this. - It says, - Please enter an email address. - So we have to put something like bob at bob dot com. - I guess you can kind of still fake it, - but it's a little more work. - And then when we submit, - it would post this information in the form to the specific file that we list in the action - . - Attribute. - Okay, - so in this case, - we just put a pound symbol is a placeholder. - So when I click send, - it actually just refreshes the page. - Nothing really happens there. - But as I said a little bit later on, - in a future exercise, - we're going to all at least give you guys some back end to make this function. - So next you're gonna want to move on to the next code challenge and implement these new - elements that you've learned into your new site. 14. Video: - Hi, - guys. - This is Exercise 2.1, - and I've already downloaded the files here The source code, - and you'll notice that if you look inside the folder that there's a few extra things in - here that didn't exist before. - So we still have the same five HTML pages in our Images folder. - But some new things are the CSS folder now. - We're not going to do a whole lot with CSS in this exercise. - In the next exercise will be learning the fundamentals of CSS and how it works in this - exercise. - We're just gonna be making use of a pre written CSS script that's going to help our HTML - five elements work everywhere. - So we'll learn a bit more about this in an upcoming exercises. - So we're also going to imbed a video in this exercise. - So I've also provide provided for you a video folder that has a recording. - It looks like this of the artist Larry Hale playing a song, - Blue Shoes. - So we have both formats here. - We have an MP four file, - and we also have an O. - G. - V file. - So this should work in all the different browsers. - All right, - so to get started. - We can drag those files here into sublime text, - which you can see I've already done. - And I'm gonna double click on the index dot html page. - This is the only page we're going to need to work on that we're gonna be working in for - this exercise. - So to start off with, - let's go ahead and go down to the section of the page where we like to add our video and - I'm gonna go down here Teoh Line 44 in the artist's corner section and we're gonna go ahead - and start out by adding the opening video tag and I'll add the closing video tag there as - well. - Now the opening video tag. - It can actually accept some special attribute names. - So to pass in an option, - you can say things like controls. - Um, - and you can just leave it as a video. - But if you say controls like this, - then what happens is when the page loads, - it will automatically make the default. - Video controls will be visible as opposed to the controls being hidden. - Um, - some other options that you could pass in here is there things like auto play, - For example, - you can specify whether you want it to auto play or not. - And there's also loop. - You can turn on looping by saying Loop for this particular video. - I don't want it toe loop. - I only wanted to play once on, - and they would have to click play again if they wanted to play a second time. - And in terms of auto play, - I'm not a big fan of auto play because sometimes it catches users off guard if they go to - your page and they hear video playing somewhere and they're not quite sure where the video - is. - So I'm gonna go ahead and let the user find the video and click the play button themselves - . - If they're interested in watching it. - I think I will leave controls in there because I want to make sure my controls are always - visible. - Okay, - that's a good start. - So the next thing we need to do is we need to link to our source video files, - and you could see that I created the video folders I mentioned before and inside that - folder have two files Blue shoes and P four and blue shoes dot gv, - so I'll just go ahead and start off by creating the source element there, - and we'll use the SRC Attribute two point toward the specific location of the file. - So in this case, - here I am on the index dot html page and I have to tell the browser exactly where this - video file exists. - So remember when we were linking two images, - we had to tell the browser a browser. - I know we're on the index page, - and I want you to go inside the images folder and display a particular image. - Same thing with the videos, - the videos air in their own folder. - So I have to tell the browser first go into the video folder by saying video slash like - that. - And then I'm gonna tell it to play blue underscore shoes dot mp four just like that. - And we'll also specify the type Videophile here is video slash mp four. - Okay, - perfect. - So this is gonna work for all my safari devices, - right? - Like, - uh, - Mac computers, - iPads, - iPhones and Internet Explorer is gonna be taken care of with this first source tag. - All right, - So for other browsers like Firefox, - chrome, - etcetera, - I'm gonna need to link to that other video format. - So the other one is called video slash blue underscore shoes dot org v and the The file - type here is video slash o. - G is the name of the Kodak there. - Okay, - so the reason why the Kodak is called Ogi Theo ra and um o g has Codex for this format can - be both audio or video. - Um, - so oftentimes, - though, - for the audio extension, - you'll see oh dot org. - And, - um, - occasionally I'll see a video with this file extension. - But most of the time, - people named the video extension as dot gv hence why this is different here. - This is slash O g and the video files. - 00 gv. - I thought I would mention that in case you guys were confused about that. - Okay, - so here's where the fall back solution comes into play. - So for older browsers that air not supporting the video elements um, - I could embed some flash. - I could download a free flash video player if I wanted to. - And put that here. - I think what I'm going to do is simply write something here. - And this this is only going to I'm gonna write a message to the user here. - And this message is only going to appear if for some reason, - the sore spot one of these source files doesn't load. - So in other words, - if they can't play the video, - they're going to see this message. - So I'm just gonna say, - um, - that their browser doesn't support HTML five video period and will be as polite as we can, - so we'll say please upgrade your browser period. - Okay, - we can even be a little bit nicer, - and we can actually give them a link to where they can upgrade their browser. - So let's go ahead and wrap a link around this text here that says, - Upgrade your browser so that when they click on the upgrade your browser tax, - that will take them to ah, - friendly website. - That's going to let them download like a newer version of Internet Explorer or a newer - version of Firefox or safari, - if that's what they need. - So as you guys remember, - we use the A tag to create a link. - So if I surround this guy like this, - I can make the opening and closing a tag around the text that I want to be. - The link, - which is upgrade your browser and then inside the opening a tag. - I can specify where it links to, - so I'll go ahead and say, - um H ref, - And there's a really great site I like to use, - which is at http colon slash, - slash and it's called. - It's pretty easy to remember. - It's called browse happy dot com, - and you can see where this would take them. - Let me copy this and through this into my browser real quick. - We'll just go ahead and pace that. - So browse happy dot com takes you to this page where you can get to the newest version of - any browser that you're looking for and you can see it always shows the latest version - number down here. - Okay, - so people can choose, - you know, - a particular browser if there comfortable with it. - So as opposed to linking to flash, - um, - we're gonna go ahead and just give them access to upgrading their browser, - which hopefully they'll do. - Okay, - um, - let's also add one Last thing is, - I don't want them to leave my website. - I want to keep my website tab open. - So by saying underscore Blank. - You remember that this attribute target and a value of Underscore Blank will make it so - that when they click this link, - it will open up a new browser window. - So I go ahead and save that. - All right, - so let's let's test this guy out in the browser. - Then I can bring this code up here and we'll just drag and drop this guy into chrome. - So we're on the index page here. - I'll just throw that in there. - Cool. - All right, - so here is, - um, - my heading my images. - And down here, - if I scroll down, - this is actually my artist section on the page and you can see the browser controls are - showing and I can click play Awesome. - Thanks, - Larry. - So that's Larry playing his guitar, - and it turns out it worked. - Good job. - And this I can assure you this is gonna work in every different browser. - You can go ahead and test it. - This guy will work on all the different devices. - Okay, - We'll just move that off the side for a sec, - will come jump back into the code. - So that is how you would embed video. - And of course, - if you're embedding audio would be the same process except you would use the audio tag - instead of video and for the source file. - Of course, - you would be linking to a, - uh, - an audio file like an MP three and an O G. - Something like that. - And I'm just in the same way that there are JavaScript solutions for for making a single - video file work and all the different browsers. - There's also job Js players, - JavaScript players for audio elements as well, - so you may be interested to check that out. 15. Prep for HTML5: - Okay. - So for the next part of the exercise, - let's go ahead and include some HTML five semantic tags into our layout. - So the first step is to prep our document for older browsers. - So even though you know, - as we looked at in the slides, - most modern browsers support HTML five semantic tags, - however, - certain older versions of, - um Firefox safari and chrome and older versions of Internet Explorer like Internet Explorer - eight and below. - Um, - I don't have any support. - They're actually created before HTML five was created so they don't have support for those - semantic tags now. - It's actually pretty painless and simple to add that support. - So what we can do is we can go into the head section here, - and the first thing we're gonna do is we're going to add support for fire, - Fox, - chrome and Safari. - And we're gonna do that by linking to a CSS file, - and we're gonna learn a lot more about, - um, - CSS in upcoming exercises. - But for now, - we're just going to simply link to some pre written CSS code that will help these elements - . - He's html five. - Semantic elements display properly in all the different browsers, - so The first thing I want to do is we want to create a link here at the top of the page, - and this link is going to point toward the normalized dot CSS file that I've included for - you. - So I have to add a couple attributes here. - The 1st 1 I want to add is called R E L. - Which stands for relation. - This tells this, - tells the browser the type of link, - the relationship of the link, - and we're gonna tell it that this is a style sheet is the type of link, - and we also have to point it toward a specific location. - So we use a draft two point this toward the specific location of the file. - Now, - I gave you a CSS folders. - We have to tell the browser to go into the CSS folder because after all, - we're on the index page here. - So we have to say, - Hey, - browser, - go from the page we're on, - which is Index, - go into the CSS folder like this and load this file which is called normalize dot CSS. - Okay, - so if we were to look at normalized that CSS, - there's actually a whole mess of coding here whole lot of code that involves using CSS - styling and all of these CSS styles. - Their main purpose is to make to make text and elements display the same in all the - different browsers. - And we'll talk a bit more about that later when we cover CSS. - But the main thing that we want to using this file is right at the top of the page. - Here it starts online. - 10. - So don't worry if you don't understand all of the CSS code yet, - we're gonna definitely come back to this at a later date, - and we're gonna describe in detail how all of this all of this works. - But there's two main important sections up here. - Um, - and this first part here is basically correcting the way things display in older browsers. - So this is a list of all the the common HTML five semantic tags that you'll use from time - to time for for layout. - And we have to tell the browser to display these in a particular way. - We're gonna go into more detail later about the different ways of displaying elements. - But essentially display Block tells the browser that these elements should display ah - vertical one on top of the other and that they shouldn't be able to display side by side. - This will give them physical space and make them display like a box, - basically essentially like a block on the page where they won't be able to fit side by side - . - When you put one on a particular line that will take up all of the line. - And we also have your correction for the audio canvas and video elements are video element - here will display in line block, - which means that it will have some characteristics of a block element, - but it will actually be able to display side by side with elements. - Okay, - so don't worry about don't worry about that too much. - We're gonna come back when we discuss box model, - and we'll explain in detail in more detail what display means and how this works. - Okay, - so I don't want to really touch CSS too much at this point. - All is, - you really have to understand is that by linking to this pre built CSS file normalized dot - CSS, - this will allow Firefox safari and chrome older versions of those browsers to display these - these HTML semantic tags correctly Okay, - so that takes care of everyone. - Except for Internet Explorer. - Okay, - So I mentioned in a, - uh I guess in the previous slides that for Internet Explorer, - we can include a JavaScript file that will allow HTML five elements toe work