In a world where you can make websites with a click of a finger, many people don't know how to create these webpages on their own. Platforms like squarespace and wix make it easy as setting up a social media account!
The internet has come a verrrrrrrrry long way, but HTML (Hyper Text Markup Language) is the code that creates websites. HTML sets the frame of every website, webpage and everything in between! If you are developer / designer like us at isquared, it is super important to know how it create websites on your own with your own code.
Before you begin the cooking, you have to set up your area. You can't start cooking without your kitchen right!
Experienced code veteran or a first day of school beginner, you can build a basic html page quite easily. Open a text editor and paste this code:
<!DOCTYPE HTML> <html lang="en"> <head> <title>My Web Page</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="myStyle.css" /> </head> <body> <h1>We Love HTML</h1> <p>This a paragraph of greatness</p> <script src="myscripts.js"></script> <!-- Put Scripts "just before you need it and no sooner". Usually At the bottom of html and after external libraries --> </body> </html>
1. Start with the doctype.
Set the doctype of your webpage to HTML5 with this tag: ” “ (Minus the Quotes of course ) on the very first line of your code. Don't leave this out! You might still will be able to use HTML5 features but validators will have to play the guessing game when deciding the type of html you are using.
2. Add the <html> tag and specify your language
This tag indicates the very beginning of a web page! Specify the language your webpage is in.
It is suuuuuuuper important to close out your html tag at the very bottom of your code! One opening <html> at the top and one closing </html> at the bottom..
3. Set Up Your <head> Area
Next up, creating your head area. Plenty of important things like your meta tags and stylesheets make themselves home in this area of your code! In this example we will put a few basic things in there to get that ball rolling!
3a. Specify the character set.
We are all about practicing good form and syntax while coding. It is good practice to let the browser know what characters to use when displaying your webpage. English pages should use UTF-8 so
is the way to go.
3b. Insert a responsive meta tag
Nowadays in the website world, most people view websites on a device like a phone or tablet. The days of the conventional square desktop screen are far gone and responsive websites are a must!
Insert this meta tag :
< meta name="viewport" content="width=device-width, initial-scale=1">
Some Background And Basics On Viewports
Use the viewport meta tag to control layout on mobile browsers. The browser's viewport is area of the window in which web content can be seen. This is often not the same size as the rendered page, in which case the browser provides scrollbars for the user to scroll around and access all the content.
Narrow screen devices (e.g. mobiles) render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then pan and zoom to see different areas of the page. For example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space.
This is done because many pages are not mobile optimized, and break (or at least look bad) when rendered at a small viewport width. This virtual viewport is a way to make non-mobile-optimized sites in general look better on narrow screen devices.
The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600or to the special value device-width, which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.) The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.
PSA: If your website isn't made to be responsive (bad idea haha) I recommend you leave this line out!
3c. Insert External CSS
CSS3 supports external style sheets. This allows you to create a stylesheet in a separate document and import it into your web page. When you use an external style, the style elements aren’t technically embedded in the page header but in an entirely separate document. Somebody say convenience!
To insert a external stylesheet, create a link tag inside the head tag of your document. Link tags have only one home! And that's inside the head tag! Its best to put Css stylesheets at the top of your document inside your head tag.
<link rel ="stylesheet" type="text/css" href="myStyle.css" />
4. Name your page with <title></title>
The title of your webpage is important. The title is what appears in your web browser’s title bar, and search engine results. This should be put at the top of your head tag and title tags should be 50-60 characters long, including spaces. Anything else probably won't display properly!
5. Add your <body> tag
So we have been doing alot of prep, but i bet you are wondering how do we start actually making content? Well worry no more! Next thing to do right under your closing </head> tag Is insert your <body> </body> tags. Most of the text visible on the website is part of the body. There are many ways to insert content/text into your website. At the most basic level we are going to put a nice paragraph <p> tag and a nice message !
Definition and usage (via w3schools.com)
The src attribute specifies the URL of an external script file.
Note: The external script file cannot contain the <script> tag.
Note: Point to the external script file exactly where you would have written the script.
Note: If you are using js libraries like JQuery / Bootstrap Load your scripts after.
7. Save Your File Using the .html extension
After this you can load your file into any browser to see how it looks!.