The article gives a simplified picture of what happens when you see a web page in a web browser on your computer or smartphone. This theory is not essential for writing the web code in the short term, but in the long run, you will start to benefit from understanding what is happening in the background. Web-connected computers are called clients and servers. – Customers are the typical...
h1 { margin: 0; padding: 20px 0; color: # 00539F; text-shadow: 3px 3px 1px black; } You’ve probably noticed that there is a space at the top of the element. This is because browsers apply a certain default style to the <h1> element (among others), even if you haven’t applied CSS at all! This might seem like a bad idea, but we even want an unused web-page to have basic...
Now that we’ve explored some CSS basics let’s start adding more rules and information to our style.css file to make our example look better. Let’s start by making the text look better. First, find the font from Google Fonts that you saved to a safe place. Adds the <link> element somewhere inside the head element in the index.html file (again, anywhere between the...
Unlike HTML, CSS is not a programming language. It is not a marking language, it is a stylization language. This means it allows you to apply styles to elements in HTML documents selectively. For example, to select all the paragraph elements in an HTML page and convert the text inside them into red, you will write this CSS code: p { color: red; } Let’s try: Insert these three lines of CSS...
This section will cover some of the essential HTML elements that you will use for text markup. 1. Titles Title elements allow you to specify that certain parts of your content are titles – or subtitles – of your content. In the same way, a book has a main title, chapter titles, and subtitles, so a HTML document functions in the same way. HTML contains six levels of titles <h1>...
This article concludes the essential HTML elements, but they are not useful alone. Next, you’ll look at how individual elements are combined to form an entire HTML page. Here we have: – <! DOCTYPE html> – doctype. In 1992, when HTML was in its infancy, doctype elements were meant to act as links to a set of rules that the HTML page had to follow in order to be considered...
For example, take into consideration the following line of content: \ My dog is very nice If you want the line to stand out, you could specify that it is a paragraph by including it in paragraph tags: \ <p> My dog is very nice </p> The anatomy of an HTML element Next, we will explore this paragraph element a little more. The main parts of our element are: 1. Opening tag: This...
File paths In order for files to communicate with each other, you must provide a file path between them – basically a way for a file to know where another file is. To demonstrate this, we will add a little HTML code in our index.html file. 1. Copy the image you chose earlier in the images directory. 2. Open the index.html file and add the code below to the file, exactly as shown...
When you work on a local website on your computer, you should keep all associated files in a single directory that reflects the file structure of the website published on the server. This directory can exist anywhere you want, but you should put it somewhere where you can easily find it, maybe on the Desktop, in the Home directory, or at the root of the HDD. 1. Choose a place to store your site...
Web design First: Planning Before you do anything, you need some ideas. What should your site actually do? A site can do just about anything, but for your first attempt, you should not complicate it. You will start by creating a simple web page with a title, image and a few paragraphs. To begin with, you will need to answer the following questions: 1. What is your website about? 2. What...