Author: Dontae M. Grose Jr. Intro Tutorials Creating webpages can be a hard, but with this quick and easy tutorial I will show you how to become a web designer. You will learn how to use html and css, which are web designing languages that are used all over the web, from Google to YouTube everyone uses html and css to build their websites. You will also learn about how these two languages are used together to make a complete and dynamic webpage. An important thing to remember throughout this tutorial is to really understand how this code is implemented. Now getting straight to the point, HTML (Hyper-text Markup Language) is a web developing language that is used to display content onto a web browser. Your internet browser is pre-programmed to understand the html code and know what it is you are telling it to do with it. CSS (Cascading style sheets) is an extension to html and although they are different web languages, they coincide with the browser to create a dynamic webpage. Downloading Notepad ++ To start writing you code you will need to have an environment to write your code inside of. The best free code editor to use for writing html and css code is Notepad++. This is what I will be using throughout this tutorial. Don’t worry the software is easy to learn and use. Steps to downloading Notepad++ 1. Go to https://www.notepad-plus-plus.org 2. Click download 3. Follow the on screen directions 4. As of late 2014 the newest version of notepad++ can be downloaded at: https://notepad-plus-plus.org/download/v6.6.9html. 5. Once you have notepad++ downloaded you want to open it. You should see a screen like this: This is the interface that all of your web developing will be done on. Setting up Files So when you have notepad++ open you will see that it looks like a regular note pad, just with a lot of more buttons. On the top of the program you will see a menu bar: On the menu bar there are only 2 categories that we will be using to create our full website. The “file” category and the “Run” category. You can see that by clicking the “file” button, we get options like “new” which is used to open a new window of text and “open” which is used to open an existing file on your computer that you have previously saved. All html documents need to be saves as (.html) files. This is because .html is a file extension, which tells the internet browser that you will be loading a webpage written in html code or hyper-text mark-up language. To save your file as an html file you want to click “file” and then “save as…”. Or you can just click “ctrl”, “alt”, and “s” to save a new file and “ctrl” + “s” to save an existing file. Give your file any name you want, but use the .html extension after it. Example: myWebsite.html I would recommend to create a folder for your file to be saved to. This will make it easier overtime for you to handle and manage your files. You can see that I created a name for my website html file and then simply added the .html extension directly after. Now I also could have clicked at the bottom of the window were it says (save as type:) and then scrolled down to where it says (“Hypertext Markup Language ”) and just clicked that. Either way will get the job done. Once you have your file saved you are about ready to start writing your website. Next open a new window in notepad++ that is empty by clicking “file” and “new”. Then save it as a css file by using the .css file extension. Example: Stylesheet.css This is the cascading style sheet extension and must be used on every css file just as the html files must also have their extensions attached to the name of the file. CSS is used to bring customization to your website. Okay now you should have two pages on your notepad++ interface; one with an .html extension and one with a .css extension. Interaction To get a bigger picture of how a text editor can work with the web browser to create a website, type your name or anything into your blank html file and then at the top of notepad++ click “run” and select the web browser you wish to run it in. Hint: If you do not save your code every time it is modified you will not get the updated version of your webpage when you are running your code. An easy way to know if your file is saved or not is to check on the tab area at the top of the screen where you see the names of your files. You will see an indicator that is either red or blue. It should appear right next to your name of the website. If it’s red, you need to save your code, and if its blue that means that the code has been updated and saved. A quick way to save your code is by using (Ctrl+s). Not saved: Saved: After typing text into your html file, saving, and clicking “run” in the ribbon of your notepad++ screen you will be able to see that the text has now opened up onto your web browser screen. View in notepad++ View in web browser Layout of an html file The layout of an html file is placed in basically the same format every time your create an html page. Delete the existing code that is in your html file and type in the following code. This is the basic outlay of every html website that is made. Here is the breakdown of the code above. Line 1: , this command tells your compiler that you are simply writing your code in the English language. That is all you will need to know about this command. Just remember not to forget it when creating any website. Line 2: , is telling the compiler that you are starting the html part of your file. Note: In html there are opening and closing tags for almost every command that is in the html language. Opening tags appear inside greater than and less than symbols <> and closing tags appear in a greater than and less than symbol with a forward slash inside (before the closing tag name is declared . Opening and closing tags for and html command are (representing the opening tag)and as the closing tag. And since we are writing html code we have to cover the whole script in these tags (with all other html elements inside these tags). Line 3: , stands for the header, and is used just to give the file some declarations of how the outlay should interact and what parameters to use. But for the most part the header isn’t used much. So the commands in it will almost always stay the same. Line 4: , this is a type of character encoding that will always need to be displayed on the inside of your header. Line 5: New Website , this is where you give your website a name that will appear on the opening tab of your browser. Line 6: , represents the end of your header. Line 7: , This is where all of the html code you learn will be written. It contains all of the important aspects of your website, include the photos, text, videos, music, links, and all other kinds of attachments and inputs. Line 8-11: Blank space or blank lines in your text editor will not be detected as anything to your browser of text editor, as long as you do not abnormally space your code, you will be fine adding spaces between chunks of code to be able to identify the functions easier. Line 12: , is the ending of the body. Line 13: is the end of the html file You can see that I closed the body tag before I closed the html tag. That is because you must have all your html files in order for your website to run and identify objects properly. This can be a big problem when you are working with a lot of code at once, but practice will help, and reviewing your code will come natural as your learn how it works. Comments You can write comments on your code editor by writing the comment command like this: Here you can see that there are 3 comments, they are made by using the tag: Comments are used to make references in your code; they do not affect the integrity of the actual webpage, and will not display anywhere but in your text editor. You can also treat the as the closing tag of a comment so that you can spread your comment throughout multiple lines or however you may want it to be. Content When it comes to adding content to your webpage you will have to 1) keep in mind that you can only write your code in the body and 2) remember that there are opening and closing tags for all declarations and they must be in order when using multiple tags in one line or object. The simplestthings displayed onto a webpage is usually the text. As you can image adding text to a webpage cannot be that hard. To display normal text we use the paragraph command

. To add a title to your paragraph or anything on your website we use the

opening and closing tags. Make sure you enter your title above the paragraph so it looks like a title on your webpage. With the

tag you will get the biggest form of the header title, if you want the title text to get smaller use bigger numbers in the heading title command. Example:

,

The smallest being

. Text Styling There are many different tags that are available when it comes to changing the way your text is viewed on your webpage.
Used to make paragraphs Is wrapped around text to make it italics
Used to make list of items with bullets
Used to make unordered lists with no bullets
Used to make ordered list Also will create italics
(Doesn’t need a closing tag) and is used to create a line break or indent. Used to make text bold Makes text small Makes text big Comments ^{Superscripts words and numbers

_{Subscripts words and numbers

Makes text appear highlighted

Writes quotations around words or phrases
Example of multiple tags being used together,}}

Intro Tutorials - HTML and CSS

Similar Intro Tutorials - HTML and CSS