GETTING STARTED There are lots of ways to create an HTML file There will probably be a simple text editor already on your computer called Notepad if you have Windows or TextEdit on a Mac These programs can help you get started but it will be easier to create HTML if you download a more powerful text editor In this book we will use a text editor called Sublime Text There are many other text editors you could download such as Brackets or Notepad All of these are free for you to try out STEP 1 FIND THE SUBLIME TEXT WEBSITE STEP 2 START DOWNLOADING Download a Click the Download button near the top of the web page a Choose which version you need If you are not sure then ask an adult to help you To find your computer system on a Mac click the Apple menu then About On a PC click the Start menu select System and click About a Wait for the download to complete WHY DO WE NEED HTML There are more than 600 million active web pages in the world HTML is the universal language that is used to create all of these web pages A special program called a browser is used to view a web page Commonly used browsers include Chrome Internet Explorer Safari and Firefox HTML pages can contain different things including text graphics tables headings buttons links and videos Each of these separate things is called an element Each element has tags and content The tag explains what type of element to display and the content tells the browser what to display inside that element a Open your web browser and visit www sublimetext com www sublimetext com STEP 3 INSTALL THE SOFTWARE a Some web browsers will then ask you to run the installation program Choose Run a If this does not happen don’t panic The installer file should have been downloaded to your computer Look in your Downloads folder for it Double-click the file to start installing your new text editor You should get a big gray box giving you instructions about what to do next Follow these instructions to complete the installation 4
STEP 4 RUN SUBLIME TEXT On a PC a Click Start Programs Sublime Text Or just click Sublime Text if it appears in the recently added section On a Mac a Click Finder a Click Applications Applications a Make a shortcut by dragging Sublime Text from Finder onto your dock at the bottom of the Desktop S a Click the Sublime Text icon STEP 5 YOUR FIRST PAGE a Carefully type this into your text editor for lines 1 2 and 3 Sublime Text html p Welcome p html 1 2 3 STEP 6 SAVE YOUR PAGE a Click File Save a Save to your Documents folder a Type welcome html as the filename Start all HTML files with html Show a paragraph saying Welcome End all HTML files with html STEP 7 VIEW YOUR PAGE a Open your Documents folder a Find the welcome html file and double-click it Your very first web page should now load in your normal web browser It should look something like this TAGS l Tags always start with and end with These are known as angle brackets l All elements have an opening tag Most also have a closing tag Opening tag Documents welcome html Welcome key concept Closing tag p Welcome p Content 5
HEADINGS AND PARAGRAPHS Now that you know how to make a very simple HTML web page let’s experiment and add some other elements to the page We’ll start by looking at how to add special text elements called headings STEP 1 START YOUR TEXT EDITOR On a PC On a Mac a Click Start Programs Sublime Text a Click the Sublime Text icon S STEP 2 ENTER THIS HTML a Carefully type this into your text editor for lines 1 to 6 Sublime Text html h1 My Timetable h1 p Math p p English p p Science p html 1 2 3 4 5 6 Start the web page Add main heading Add first paragraph Add second paragraph Add third paragraph End the web page STEP 3 SAVE YOUR PAGE a Click File Save a Save to your Documents folder a Type timetable html as the filename STEP 4 VIEW YOUR PAGE a Open your Documents folder a Find the timetable html file and double-click it a Your web page should now load in your browser a Notice how the h1 heading tag has made the heading text large and bold Documents timetable html My Timetable Math English Science 6
STEP 5 ARRANGE YOUR SCREEN As you start to develop more complex HTML pages you need to be able to see the code and the HTML page at the same time a Resize your text editor and browser windows so your screen looks like this whenever you are working on programs in HTML If you make a change to your HTML in the text editor save your file Sublime Text html h1 My Timetable h1 p Math p p English p p Science p html 1 2 3 4 5 6 Documents timetable html My Timetable Math English Science To see the effects of your changes you need to reload the web page Click the Reload this page icon CUSTOMIZE Change the timetable so it matches your own Add to the timetable so it includes every day of the week Experiment with other heading tags from h1 down to h6 Remember to use closing tags too h6 STEP 6 SUBHEADINGS a Change your code so it has subheadings for Monday and Tuesday Sublime Text html h1 My Timetable h1 h3 Monday h3 p Math p p English p h3 Tuesday h3 p Science p p History p html 1 2 3 4 5 6 7 8 9 Insert an h3 subheading that says Monday Don’t forget the closing tag h3 When you add the in the closing tag most editors will finish the tag for you Add another h3 element for Tuesday Close it with the tag h3 Add more paragraphs to show other subjects Now view your new web page HEADINGS l Use h1 and h1 tags to show important headings on your pages key concept Use other tags such as h3 for less significant headings 7
