HTML Web Design Lesson: Understanding HTML File Structure and Creation
Fundamental aspects of HTML file structure and creation, starting with the declaration tag, container tags, and main components such as , , and . Learn how to build your own webpage step by step using a plain text editor and browser-based IDE like Replit, enhancing your understanding of web development
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Youth Code now, Inc. Youth Code now, Inc. HTML web design Lesson 2 HTML
HTML HTML structure HTML files or documents have two main parts: the head and the body. Every HTML files start with <!DOCTYPE html>. DOCTYPE stands for document type. The declaration Document type html, which is <!DOCTYPE html>, lets the browser know that the following file is an HTML file. HTML 2
HTML Once you wrote <!DOCTYPE html> all you need is the following four additional tags to build your webpage: <html>, <head>, <title> and <body>. These four tags are container tags. And as you know, container tags have opening and closing tags. HTML 3
HTML This is how a typical html file looks like: <!DOCTYPE html> <html> <head> <title> This is My first web site </title> </head> <body> </body> </html> HTML 4
HTML Let s examine our html file structure: 1. We see that every HTML document begins with <!DOCTYPE html>, this tells the browser that the following document is an html file. 2. That the HTML document begins and ends with the <html> tag. 3. Inside the html container tag that there are two main parts: the head and the body. 4. The <head> tag and the <body> tag are also container tags. 5. The <head> tag contains the title of the document. HTML 5
HTML The main content of your page is placed within the body tags: your text, paragraphs, your pictures or any other images, links, and so on. Now you all are going to start building your own personal webpage HTML 6
HTML In order to create your webpage, you need to write HTML file. And to write your HTML file on your computer, you need a plain text editor like notepad. HTML 7
HTML Here in this class, we will use browser-based IDE ( Integrated development environment) called Replit, to write your HTML code. With Replit you can write your HTML file and view your HTML pages side by side. HTML 8
HTML Now, you need to create your Replit account. 1. https://replit.com 2. Click sign up (it s on the top right-side corner) 3. Choose a username (Your username must be between 2 and 15 characters) 4. Enter your e-mail addressee 5. Choose a password (Your password must be at least 6 characters long) HTML 9
HTML 6. Sign in to your email account , you will see an email with subject line Repl.it: Verify Your Email Double click the link under complete verification to confirm 7. Click the See all languages under the Create section HTML 10
HTML is the standard markup language for creating Web pages. With HTML you can create your own website. HTML HTML pages are just text files. We can edit text files with Notepad. Thus, to prepare your text files on your computer, you need a plain text editor, Notepad. Make sure that you have access to notepad in your Chromebook. Check Now! HTML 11
HTML Click HTML, CSS, JS link below HTML 12
HTML To build your website you need to know first some of the terminologies or rules in HTML. Let s learn those rules: HTML 13
HTML HTML is made up of tags. What are Tags Tags are angled brackets < >. Looking at your keyboard just above the comma and period, you will find those brackets. Inside these tags are words or letters that guide the browser what to do. HTML 14
HTML Tags Click create repl HTML 15
HTML Do you see index.html to the left side of the editor? HTML file should end with .html extension , not .txt extension. And to the right side what you see is a browser. As we discussed before, when ever you write your html tags, you would be wanting to view or test your code to see how they appear in your browser. HTML 16
HTML Now in the browser everything looks blank, Right? Yes, because the file doesn t have anything in it yet. It s completely Blank, well that s great that means you are starting to create your web pages from scratch. Now, we will start writing some codes. Your code will contain a mixture of the content that you want the user to see and also the HTML tags that make the web page behave the way that you want to. HTML 17
HTML Pretty much all websites follow this pattern, look at your index.html file, the one on the left side: The outer HTML tag contains, inside of it, both a head and the body. HTML 18
HTML The first tag that you should always have is the header. The stuff that you see written in the heading part takes care of all of the information on the website you don t necessarily see. HTML 19
HTML In the Title change repl.it to My First Website Also, in the header you see a link that links to style.css Style.css is what makes our website pretty. HTML 20
HTML Click on the style.css (found at your left-hand side ), there is nothing in there. Right? Which means your website will be basic, bare one, with out no style. We all don t want to have a boring website; so, you will put some code in style.css file to make your website look nice and cool. HTML 21
HTML The next part you see is the body part. Everything the user can see is in the body of your webpage. HTML 22
HTML The main content of your page is placed within the body tags: your text, paragraphs, your pictures or any other images, links, and so on. Now you all are going to start building your own personal webpage HTML 23
HTML Do you notice that there is nothing in the content area? Why? Because we have nothing in the body. All of the visible content has to be inside of the body, so now let us go back to our index.html file and see what we can do inside the body. Let s add this phrase inside the body: HTML 24
HTML Let s add this phrase inside the body: About Me Run your code. What do you see on web browser section (on the right side)? Do you see any change there? HTML 25
HTML Yes, you see some content showing up in the body. So, whatever content you put in the body of your index.html file shows up as your web page when you load your browser. HTML 26
HTML Let us add another phrase to your page. Let s add a new phrase: Are you a Youth Code Now student, and tell us about what you like? Coding What did you enjoy about Youth Code Now after school program? What did you learn at your after-school program? HTML 27
HTML Run this file and view it. What do you observe? In your html file, these four sentences are on different paragraph. But, in the web browser those four sentences merged, and we see only one big paragraph. Why? Because web browsers ignore white space. White space helps separate paragraphs of text. HTML 28
