In this educational you’ll learn how to make a primary website from scratch using Notepad. If you are on a Mac you want to apply TextEdit.
There are different professional code editors that you could use to edit code like html
NotePad++ (Windows) – FREE Adobe Brackets (Windows/Mac) – FREESublime Text (Windows/Mac) – PAID
If you are on a Mac and also you want some thing better than TextEdit, you could download Adobe Brackets which works on both Mac & Windows. I could be running on Windows and consequently the usage of the basic version of Notepad. The code in this educational works in any editor so simply choose an editor you want and let’s start.
Making your first web page in Notepad
To open Notepad on Windows 7 or earlier, click on on Start -> All Programs -> Accessories -> Notepad. You also can click on Start and search for “Notepad”.
Open TextEdit and make sure the text editor is ready to straightforward textual content by way of going to Preferences > New Document > choose plain text. Next make certain to test “Display html report as html code” and “Display RTF record as RTF code” below “Open and Save”.
Next reproduction and paste the following code into the editor:
My First Heading
My first paragraph.
Saving the HTML File
Save the document as “index.html” with an HTML extension. This could be very vital in case you don’t upload the .html to the cease of the call, it may not work. Note: Even although .html is preferred you may additionally use .htm with out the “L”.
Set the Encoding to UTF-8, that’s desired for html files. ANSI encoding is handiest for US and Western European characters.
Opening HTML File in the Browser
Next, go to the folder wherein you’ve got stored the file and open it to your browser. In this case we are using Chrome, however any cutting-edge browser must work.NOTE: If you’re having hassle commencing the document, make sure you have saved it as .html.
Viewing HTML File in the Browser
Once the record is opened in your browser it’s going to look like this:
Notice the record path in the URL Bar document:///C:/Users/WebsitesDIY/Desktop/HTML/index.htmlThat is the total course to the report on your pc.
Centering the Text
Now that you apprehend the basics of creating an html record, allow’s discover ways to center text
Go into the html file you’ve got created and upload the
My First Heading
My first paragraph.
Save the File and reopen it inside the browser once more. If your browser window remains open you may absolutely click on refresh to reload the page.
The header textual content should now be centered within the middle of the net web page.
Adding a Youtube video to your WebSite
To add a youtube video to your internet site: Go to Youtube and discover the video you need to add in your website.”Right Click” on the video and “Copy Embed Code”.
Pasting the Video Embed Code into Notepad
Paste the embed code into Notepad
The embed code will seems something like this:
You can exchange the width and top to some thing you want. Just trade the ones numbers within the code and depart the whole thing else unchanged. In this case we are able to be the usage of a width=”427″ and height=”240″. You can set yours to whatever you want.
Center the Video by means of placing the tag across the Embed Code you’ve got copied from YouTube.
Also, lets change the heading between the
My First Heading
tags to mention “My Website”.
Adding a Link to another page
We will now upload a link that goes to Google when human beings click on it.
Add the subsequent code on your website simply below the video:Go to Google
Notice how the hyperlink is targeted the use of the middle tags. Also note the
tag just before the center tag – this provides a line spoil among the video and the link.
You have to now see a hyperlink below the video which goes to Google if you click on on it.
You can create hyperlinks that go to any web page which you want. Just change what is in the href characteristic.
If you want to open the link in a brand new window when someone clicks on it, upload the subsequent attribute in the hyperlink tag:Go to Google
Creating a 2d Page in your Website
Now, we’re going to make a 2d web page for your website and call it page2.html. This manner you can create links to different elements of your internet site in place of linking to Google like we did in advance.
Create a new html record and upload the underneath code to it. Save it and call it page2.html
This is my 2d page.
Your website will now have a 2d web page that we are able to link to from the primary web page.
Linking to Page2 from your Main Page
Now that we’ve created Page2, lets regulate the hyperlink on the primary page to link to page2.html
Open up “index.html” and trade the URL that links to Google to hyperlink to Page 2 alternatively:
You are actually on page 2 of your internet site
If you have created your link effectively you must be taken to page.html whilst you click on on the hyperlink beneath the video. If for a few cause your hyperlink is not working, move lower back some steps and follow the instructions once more. Knowing how to upload hyperlinks/URLs to your internet site could be very effective. After all the net is just a big series of links listed by means of Google.
Adding cool styles with CSS
We are actually going to style the link to page2 the usage of CSS so it looks like a button. CSS is used to manipulate the format of your website.Copy and paste the following code at the pinnacle of your index.html page simply beneath the tag. When pasting don’t overwrite the opposite code.
adisplay: inline-block;width: 100px;peak: 30px;line-top: 30px;padding: 10px;heritage-color: #00AEEF;color: #ffffff;border-radius: 10px;
What this piece of code essentially does is it tells the browser to feature a background coloration and height to the link we made in advance. We additionally made the corners a touch rounded by including the border-radius of 10px. There are lots of loose tutorials online wherein you may learn extra about CSS so that it will make your website look actually exceptional.
Adding a hover impact to the button
One last aspect we’re going to do is add a hover effect to the button. The hover effect will make the button flip a specific color while you hover over it along with your mouse.
Add the subsequent code just above the ultimate tag:
a:hover background-colour: #005170;
Your internet site have to now seem like this
Your internet site have to now appear to be the example inside the photograph. There have to be a header with the name on the top, a video within the middle and a button at the bottom. When you hover over the button along with your mouse the coloration must alternate to a darkish blue. If your internet site does not appearance proper it’s due to the fact you possibly have mistakes inside the code. Please go again a few steps and strive once more. It’s vital to apprehend the basics before going to the following step where we will display how to positioned your internet site on the net so each person can get admission to it.
Going Live with your Website
In order for the world to see your internet site it desires to be uploaded to a webserver that remains connected to the internet 24/7. Now, we do now not recommend setting up your personal server. It’s a good deal less difficult to pay $3 or $five a month to a professional internet hosting issuer to do that for you. I recomment the use of BlueHost and signing up for their Plus Planto launch your internet site and get a FREE domain name – this internet site is hosted on BlueHost and we love it. They are speedy, stable and feature outstanding customer support.
Sign Up for WebHosting at BlueHost
How to Make a Website with WordPress Step by using Step Tutorial
Now which you recognize the fundamentals of making a simple web web page, I need to introduce you to WordPress – the maximum famous website builder inside the international. WordPress is Free Opensource software program – which means you may download it and use it without cost on as many internet site as you want. I have written a complete academic on the way to installation your website with wordpress – read it right here. In this tutorial you may learn how to:
Get a Free Domain Name from BlueHostSet Up your Own Hosting Account on BlueHostSet up your internet siteGet Premium Themes/Template From ThemeForest
I hope you’ve observed this guide helpfull. If you get caught or have questions please be part of our community.