TechAtHeart
3 years ago1,000+ Views
DIY One-Page Website: Part 1/4 - HTML Basics
What you need: 1. A plain text editor. I recommend Notepad++ ( http://notepad-plus-plus.org/ ) 2. A browser so you can test your code HTML BASICS HTML stands for HyperText Markup Language and it basically is a text file that tells the browser what to display. All of your webpages need to be saved with the extension ".html" in order for them to be read correctly on a browser. Keep this in mind when saving your files. + Basic layout of an HTML page (fig. 1) is encapsulated by the tags <html></html>. Then inside that tag the basic layout contains the: 1. HEAD - this is where the page title and linked css/javascript would go. it is not shown on the web 2. BODY - this is where all the content goes and what will be displayed. You can put many different things here, including pictures, videos, etc. I linked a reference to all the HTML tags you can use. STEP 1: Open new file on Notepad ++ STEP 2: Setup the basic html layout shown in fig. 1 Here is the code for you to copy/paste: <html> <head> <title>Demo</title> </head> <body> <div id = "header"> <h1>Hello World!</h1> <p>Welcome to my new website! :)</p> </div> </body> </html> STEP 3: Save file as "index.html" STEP 4: Double click on file on your computer to open it on your browser (fig. 2) STEP 5: View page on browser (fig. 3) Tada! In the next step I will show you how to add some color and style to your webpage using CSS
4 Like
4 Share
0 comments
4
Comment
4