Alifiya Saify - HTML AND CSS: The Ultimate step by step guide to learn these Programming Languages

HTML AND CSS: The Ultimate step by step guide to learn these Programming Languages — read online for free the complete book (whole text) full work

Below is the text of the book, divided by pages. System saving the place of the last page read, allows you to conveniently read the book "HTML AND CSS: The Ultimate step by step guide to learn these Programming Languages" online for free, without having to search again every time where you left off. Put a bookmark, and you can go to the page where you finished reading at any time.

Light

Font size:

↓

↑

Georgia Tahoma Arial Verdana

Reset

Interval:

↓

↑

Bookmark:

Make

123

HTML AND CSS

The Ultimate step by step guide to learn these Programming Languages

Alifiya Saify

Copyright 2020 Alifiya Saify

All rights reserved
No part of this book may be reproduced, or stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, or otherwise, without express written permission of the publisher.

Introduction

HTML and CSS are the most important skills for the web professionals. This step by step guide explains how to create an HTML file, a CSS file and how to make them work together. After that, you can switch to using a dedicated HTML or CSS editor that helps you set up complex sites.

At the end, you will have made an HTML file that resulting HTML page, with colors and layout, all done with CSS.

* Sections that look like this are important. They contain some explanation of the HTML and CSS codes in the example. So the * sign at the start indicates that this is important material.

Good luck, have fun coding and lets get started.

HTML and CSS

HTML today, is almost in every web page, nevertheless the complexity of the website or lots of technologies involved in it. It was created by Tim Berners-Lee, Robert Cailliau, and others in 1989.

HTML stands for Hyper Text Markup Language layouts the basic structure of sites, which is enhanced and modified by CSS stands for Cascading Style Sheets which helps to control presentation, formatting, and layout.

Hence HTML is the foundation of all web pages which adds structure and form to text, images, etc. Whereas CSS is use for styling HTML content.

STEP 1: WRITING THE HTML

For this you have to use only the very simplest of tools. E.g., Notepad (under Windows), TextEdit (on the Mac) or KEdit (under KDE) will do fine. Once you understand the principles, you may want to switch to more advanced tools, or even to commercial programs, such as Style Master, Dreamweaver or GoLive. But for your very first CSS style sheet, it is good not to be distracted by too many advanced features.

Don't use a wordprocessor, such as Microsoft Word or OpenOffice. They typically make files that a Web browser cannot read. For HTML and CSS, we want simple, plain text files.

Step 1 is to open your text editor (Notepad, TextEdit, KEdit, or whatever is your favorite), start with an empty window and type the following:

Then write :

Then write :

(If you are using TextEdit on the Mac, don't forget to tell TextEdit that the text is really plain text, by going to the Format menu and selecting Make plain text.)

* The first line of the HTML file above tells the browser type of HTML this is (DOCTYPE means Document TYPE). In this case, it is HTML version 4.01.

Words within < and > are called tags and, as you can see, the document is contained within the and tags. Between and there is room for various kinds of information that is not shown on screen. So far it contains the title of the document, but later we will add the CSS style sheet there, too.

The is where the actual text of the document goes. In principle, everything in there will be displayed, except for the text inside , which serves as a comment to ourselves. The browser will ignore it.

Of the tags in the example,

introduces an Unordered List, i.e., a list in which the items are not numbered. The
• is the start of a List Item. The

  is a Paragraph. And the is an Anchor, which is what creates a hyperlink.

The KEdit editor showing the HTML source.

* If you want to know what the names in <> mean, one good place to start is Getting started with HTML. But just a few words about the structure of our example HTML page.

The ul is a list with one hyperlink per item. This will be the other pages of our (hypothetical) Web site. Presumably, all pages on our site have a similar menu.

The h1 and p elements form the unique content of this page, while the signature at the bottom (address) will again be similar on all pages of the site.

Note that I didn't close the li and p elements. In HTML (but not in XHTML), it is allowed to omit the and
tags, which I did here, to make the text a little easier to read. But you may add them, if you prefer.

Let's assume that this is going to be one page of a Web site with several similar pages. As is common for current Web pages, this one has a menu that links to other pages on the hypothetical site, some unique content and a signature.

Now select Save As from the File menu, navigate to a directory/folder where you want to put it (the Desktop is fine) and save the file as mypage.html . Don't close the editor yet, we will need it again.

(If you are using TextEdit on Mac OS X before version 10.4, you will see an option Don't append the .txt extension in the Save as dialog. Select that option, because the name mypage.html already includes an extension. Newer versions of TextEdit will notice the .html extension automatically.)

Next, open the file in a browser. You can do that as follows: find the file with your file manager (Windows Explorer, Finder or Konqueror) and click or double click the mypage.html file. It should open in your default Web browser. (If it does not, open your browser and drag the file to it.)

STEP 2: ADDING SOME COLORS

You probably see some black text on a white background, but it depends on how the browser is configured. So one easy thing we can do to make the page more stylish is to add some colors. (Leave the browser open, we will use it again later.)

We will start with a style sheet embedded inside the HTML file. Later, we will put the HTML and the CSS in separate files. Separate files are good, since it makes it easier to use the same style sheet for multiple HTML files: you only have to write the style sheet once. But for this step, we just keep everything in one file.

We need to add a element to the HTML file. The style sheet will be inside that element. So go back to the editor window and add the following five lines in the head part of the HTML file. The lines to add are shown in red.

Continued*

The first line says that this is a style sheet and that it is written in CSS (text/css). The second line says that we add style to the body element. The third line sets the color of the text to purple and the next line sets the background to a sort of greenish yellow.

Next page

123

Light

Font size:

↓

↑

Georgia Tahoma Arial Verdana

Reset

Interval:

↓

↑

Bookmark:

Make

Similar books «HTML AND CSS: The Ultimate step by step guide to learn these Programming Languages»

Look at similar books to HTML AND CSS: The Ultimate step by step guide to learn these Programming Languages. We have selected literature similar in name and meaning in the hope of providing readers with more options to find new, interesting, not yet read works.

Faithe Wempen

HTML and XHTML Step by Step

Patricia Harris

What Is HTML Code?

D WYSE

HTML & CSS DEMYSTIFIED: Complete and Concise Web Design & Development Coding Crash Course

SHANMUGAPRIYAA S

LEARNING WEB DESIGN - HTML5: A Practical Handbook

Willard

HTML: CourseLoad ebook for HTML A BEGINNERS GD 5E

iCodeAcademy

HTML & CSS For Beginners: Your Step by Step Guide to Easily HTML & CSS Programming in 7 Days

Unknown

manual HTML

McMahon

HTML & CSS Crash Course: Learn html and css with easy to follow-step-by-step tutorials

Madoff

HTML: Learn HTML With Ultimate Zero to Hero Programming Crash Course for Beginners

Acodemy

HTML: Learn HTML In A DAY! : The Ultimate Crash Course to Learning the Basics of HTML In No Time

Mahi Singh Rawat

Learn HTML - From Beginner To Advanced: HTML Complete Guide

Steven M. Schafer

HTML, XHTML, and CSS Bible

Discussion, reviews of the book HTML AND CSS: The Ultimate step by step guide to learn these Programming Languages and just readers' own opinions. Leave your comments, write what you think about the work, its meaning or the main characters. Specify what exactly you liked and what you didn't like, and why you think so.