INTRODUCTION In this book you will learn how to code your own amazing web pages using HTML HTML stands for Hypertext Markup Language It is the language used to build web pages The programs in this book use version 5 of HTML HTML5 You’ll find out how to add text images links and even videos to a web page Once you have completed every program you will be on your way to becoming an HTML expert There are many different tools you can use to build web pages You could use a simple text editor a program that lets you enter change and store text Simple text editors work fine but can be touchy This is because the software won’t help you 1 2 page html html p My text p supereasywebbuilder com My website There are many Internet sites and blogging tools that are able to quickly build web pages but using these doesn’t teach you about HTML The best thing to use for the activities in this book is an offline HTML editor such as Sublime Text This will support you as you type your code but also give you the opportunity to learn the actual HTML code There are two separate windows that you’ll be using Sublime Text html h1 The Forest h1 img src tree jpgl html 1 2 3 4 The text editor to make your HTML page Web Browser The Forest Read through each page of this book then try the activities You’ll learn how to put the basic elements on a web page then add different colors and font sizes Toward the end of the book you’ll be able to do some amazing programs and even create your own mini-websites Note Words in italics appear in the glossary on page 30 The browser to view your HTML page 3
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
