HTML TUTORIAL BOOK

adminComment(0)

PDF Drive is your search engine for PDF files. As of today we have 78,, eBooks for you to download for free. No annoying ads, no download limits, enjoy . This tutorial will give you enough ingredients to start with HTML from where content and graphics published in this e-book are the property of Tutorials Point (I ). Our HTML tutorials teach you how to create a personal website or site for your business, without forcing you to learn.


Html Tutorial Book

Author:TANNA HELMUS
Language:English, Dutch, French
Country:Nicaragua
Genre:Lifestyle
Pages:534
Published (Last):02.03.2016
ISBN:618-6-51783-373-7
ePub File Size:26.42 MB
PDF File Size:17.25 MB
Distribution:Free* [*Registration needed]
Downloads:37068
Uploaded by: VICTOR

(HTML). HTML is the building block for web pages. You will learn to use HTML to author an HTML page An HTML file is a text file containing small markup tags. I don't think that it is worth learning HTML and CSS from any book as it will only give you a little bit of Visit W3Schools Online Web Tutorials. Learn to Code HTML & CSS is a simple and comprehensive guide dedicated to Outlining the fundamentals, this book covers all of the common elements of.

The hyperlink allows any document to reference any other document, and provides immediate access to that other document. Hyperlinks are what make the World Wide Web a web, and not just a library or database. HTML 2.

HTML 4. This version of the standard, with its three variations strict, transitional, and frameset defined HTML most of the next decade. If you learned how to build web pages before , you almost certainly learned this version. Alongside HTML 4. For the most part, this did not happen. This section introduces HTML, the language used to author web pages, and provides a little background regarding its history and the reason it is used.

The tags provide meaning, context, and display information to the text they surround. Imagine any text-based document you have ever read: There is the text, of course — but theres something else: Some of the words are larger or smaller, some are italicized or in bold, some are a different color or a different font.

The file that one of these documents is saved into has to contain both the human-readable text and also the information about the display. A number of different ways to accomplish this have been tried, and the most convenient way to do it is to store the information in line with the text itself. I want to make these words bold and these other words italic. These inline matching pairs of style declarations are called tags, and something like this is the basis of almost every markup language.

But this format shown above isnt HTML, its just a little made-up example. Recently, there has been a move away from explicitly declaring typographical details like bold and italic and instead using the markup to convey the meaning, not just the look.

So in contemporary documents the sentence above would be:. I want to make these words stand out and to emphasize these words. Hypertext is a word that was invented in the s to describe documents that contain links that allow the reader to jump to other places in the document or to another document altogether.

These links, which we now take for granted in the modern web, were a big deal when computers were first coming into maturity. HTML is used for almost all web pages. The web page you are reading right now uses HTML.

It is the default language of websites. HTML documents are rendered by a web browser the application you are using to read this page. HTML rendering hides all the tags, and changes the display of the rest of the content based on what those tags say it should look like. However, sometimes those graphical editors dont work exactly the right way, and sometimes you will want to do something and not understand why you cant.

Therefore, it is highly recommended that if you are going to be writing for the web, even just regular blog posts and announcements, that you get a good understanding of basic HTML concepts.

If you are interested in staying informed about how your website appears to non-human visitors, understanding HTML is an important skill. Similarly, website accessibility — the ability for a website to be navigated successfully by people with visual or other handicaps — is an increasingly important consideration.

The blind rely on computerized screen readers to translate web sites into sound, and the quality and structure of the underlying HTML document has a big impact on the ability of the screen reader to work properly.

Mostly, HTML is the common underlying language of the contemporary internet. If you want to understand how the world works, it is a good idea to at least have some familiarity with HTML. It consists mainly of matching pairs of angle-bracketed tags, enclosing sections of human-meaningful text.

The tags, which are not displayed by web browsers, are used to provide information about how the text and page should be displayed. This section takes a close look at tags, the fundamental building blocks of HTML. It covers how they work, some exceptions to the normal way they work, and a brief discussion on tag attributes.

Generally, matching pairs of tags surround the section of text which they affect. The opening tag can contain additional attributes which provide more information about the contents of the tag and how to display them.

A few tags do not occur in matching pairs, because they are used to insert something, rather than describe text. The src attribute is used to specify the URL of the image. Notice there is no closing tag, and therefore no enclosed text. This is not absolutely required, but it is a good reminder that whatever follows will not be enclosed. Others do not insert something visual, but are used to provide information about the page itself.

With the exception of tags that provide information about the document itself, HTML tags fall into two categories, block and inline. Block elements represent rectangular blocks of content. They have an implied line break before and after.

It is standard practice to type most block-level tags on individual lines above and below their content:. Block-level elements can be nested, but some block-level elements can not contain other block-level elements:. Inline elements are elements used within text. This doesnt do a whole lot by itself, but can be used to create customized types of text-display, through the use of elements.

However they are actually inline elements. The reason for this is mostly a hold-over from a less-sophisticated period of web design, but were stuck with it now. The weird implications of this can be avoided easily, but its good to know.

See the section on images and also the one on CSS. There are other weird issues like this, and they will be covered later in this guide when they come up. Almost every element tag can include attributes. An element can have more than one class. Multiple classes are separated by spaces inside the class element. In CSS, JavaScript, and other languages, the class of an element is notated with a dot before the name.

The above CSS code means that within any element that has a class of first , the text color should display as green. The ID attribute works similarly to the Class attribute, but is conceptually different. Rather than signifying the elements membership in a group, it uniquely identifies that element. For this reason, there can be only one element with any specific ID on any given page. IDs can be used for internal linking of a document, such as the Table of Contents on a wikipedia article.

Notice that the links to the sections include the name of the tag, prefixed with the hash or pound sign. This is the standard way to reference the id of an element:. Each HTML tag has its own set of available attributes relating to their specific purpose.

These attributes will be covered in more detail as we look at each tag individually in later sections. These will also be covered in more detail later on, as their uses become more relevant. The last point to cover in basic HTML tags is the comment.

Comments begin with an angle bracket, followed by an exclamation point and two dashes. They end with two dashes and a closing angle-bracket.

You need to watch our for nesting of comments if you ever try to comment-out a large section of existing HTML — inline comments in the original section will mess up your commenting. Anything inside the comments will not be displayed to the user inside the browser. However, HTML comments can be viewed by the site visitors if they choose to view the page source. Therefore, do not use comments for anything you wish to hide from the public. HTML is essentially text content with tags that are used to specify the meaning of that content within the document and the relationship of each piece of content to the others.

Tags are short snippets of letters inside angle-brackets. They typically consist of a matching pair — an opening and a closing tag. The opening tag is just the tag name, while the closing tag is prefixed with a slash. Attributes may be added to any element.

Attributes are specified inside the opening tag, as name—value pairs joined by an equal sign. The value must be inside single or double quotes double quptes is standard. The two most common attributes are the class and id attribute, which are used both for styling and functional purposes.

This section covers all the most common elements that are used for typographical styling and semantic meaning within the text of a typical HTML document. Elements covered include headlines, paragraphs, lists, and links — and several others.

It is mildly good for SEO, and very good for readers, to break articles into logical sections and use appropriate heading tags within the content of an article. Instead, put the entire title and subtitle into a single headline tag and use another tag to define the relationship:.

Sidebar sections, or widgets, need titles, but these are not generally relevant from a content SEO standpoint. In a particularly long document, it might be a good idea to make it possible to link not just to the page as a whole, but to a specific section. The natural candidate for such links are headline tags, because they are used to identify the beginning of sections. All that is needed to make this work is to add a unique id attribute to the header element.

Some people prefer to put the opening and closing tags on individual lines. This may help with reading source code, but it makes no difference to how a page ultimately looks to a user. The unordered list is a way to present a list of bullet-pointed items. In the past, you could specify what kind of bullet you wanted disc, square, circle in the type attribute. But as of HTML5, this is not supported. If you want to change the bullets, youll have to use CSS. Ordered lists are lists which are numbered or lettered.

The type attribute can be used to change the default Arabic numerals 1, 2, 3 to letters or Roman numerals capitals or lower-case. The start attribute can be used to begin the list numbering on a number other than 1. This can be used for numbers or for other types. Finally the reversed attribute can be used to number the list items in reverse order. This can be combined with either of the other attributes or both. They are used to provide a list of terms with descriptions, such as in a glossary.

The obvious use for a description list is a glossary or dictionary, but that isnt the only standard use. List of names: List of audio track titles: List of product offerings: List of stats: Anytime you have a list of items which each require more detail, the description list is a good idea.

This means that a description list can be a very content-rich markup scheme whenever you have individual items which each need additional details of any kind. There is also one off-the-wall use for description lists, which is somewhat controversial.

Definition lists are underused, but they are actually a really great way to present all sorts of content. Notice that the bullets automatically change with each nesting.

This is the default rendering style for most browsers. Unfortunately the same thing does not happen with ordered lists. If you want the school-notes outline style with different types of numbering at each level, you have to do it yourself. This is because all lists are block-level elements, and paragraphs which are blocks also can only contain span-level elements.

This can occasionally be annoying because in normal written text there are sometimes perfectly good reasons for wanting to include a list inside of a paragraph. However it simply does not work. Blockquotes can be used for large blocks of quoted material, whether that material is an excerpt from a literary work, song, another blog post, or an e-mail message that you are responding to.

If you want to cite the source of the quote, there are two ways to do that. You can also do both. My favorite line in Hamlet is when he says, To be or not to be, that is the question.

This is not often used because there is already a perfectly good way to show that you quoted something — by using quotation marks. The rel attribute is underused by non-technical website creators, and it is a great way to bring rich, semantic information into the markup in a way that search engines, aggregators, and screen readers can understand.

For example: The rel tag can also be used in Microformats , which are simple ways of including additional semantic information within existing HTML attributes usually rel and class. For example, the XFN Microformat suggests using the rel attribute when linking to the home or profile pages of people with whom you have a relationship. There are several additional Microformats that use the rel tag, as well as other ways to include this kind of semantic information in the markup of your website.

There are a number of simple tags which are used for basic text markup within a paragraph or other element. Therefore, non-link underlining does not get used very often. There are, though, markup tags for it. There are two elements which mark text to be lined through. Each has a slightly different meaning. They both display in a monospace font usually Courier by default, preserve whitespace, and do not render any tags. You can make text arbitrarily larger or smaller with two elements that otherwise have no specific meaning:.

Im not sure why there isnt a sarcasm tag. Maybe it just isnt needed because tone is so easy to read on the internet. Neither of these elements requires a closing tag, because they do not enclose any text. If it helps you read your source code better, you may include the self-closing end slash: Two good examples are poetry or song lyrics and addresses.

All this may seem complicated, but it really isnt. Most of the tags you need on a regular basis are easy to remember: You dont need to memorize all the different options or meanings behind each one.

Just try to keep in mind that any normal typographical item like a headline, a list, a paragraph, or a link probably has an existing HTML tag to accomplish it. If you keep that in mind, you can just write without focusing on these things and then look up the specific items you cant remember. Try not to get bogged down with options, either. The important thing is that your markup is as meaningful as possible, without being overly complicated. If you cant decide which of two or more options is the best, ask which one is more meaningful.

If you cant figure that out, ask which one is simpler. If you still cant decide, just pick one — if they seem that similar, then there probably isnt going to be a huge difference in how it works out.

It also explains how to organize the various sections of a typical web page. There will be more information in the HTML5 section below. HTML documents web pages need to follow a few basic structural rules in order to work properly and be read accurately by web browsers.

There are several different HTML and related standards that have been in use over the years, and so therefore it is important to specify which type of document which HTML standard your document is using. So an HTML document should begin with:. This isnt exactly an HTML tag in the proper sense, but rather it tells the browser how to interpret all the other tags that follow. The body contains all the visible content, while the head contains information about the document itself.

Nothing is outside of these two sections. Metatags are empty tags, requiring no closing tag. There are several different common ways to encode characters letters, numbers, and punctuation in computer memory. If you dont specify which one you are using, the web browser may mess up and display some of the wrong characters. The other common encoding — ASCII — doesnt have all the extended characters like em-dashes and curly-quotes.

If youve ever seen weird type glitches where quotation marks or apostrophes have been replaced with seemingly random characters, its because the document was written in UTF-8 but displayed using ASCII — which means someone didnt specify the correct character set in the document. These each have two attributes: This kind of information used to be especially important for SEO purposes.

It is no longer the case that this plays a huge role in SEO, however it does affect it. More importantly, having correct and detailed information in these elements contributes to a semantic web, where all content is easily findable and parsable by machines. If you use a Content Management System, the tags and post descriptions you write in the editor screen will usually be displayed in these meta tags. It encloses the title.

The contents of the title are typically displayed in the tab at the top of the browser window. Style Sheets, written in the CSS Cascading Style Sheet language, are separate documents which provide information about how to display a page in a browser.

Information about sizes, colors, placement, and fonts are all contained in the style sheet. Keeping these details separate from the main HTML document makes it easier to change them without affecting the content of the document itself. The href attribute specifies the URL of the style sheet file, and the rel attribute specifies that the link is a stylesheet link there are other types of links.

RSS — Rich Site Summary, or Really Simple Syndication — is a way of providing a feed of site updates like new blog posts to subscribers, so that they are informed of new content as it is posted and can read that content from an RSS reader without having to visit your site.

The type attribute specifies the type of format RSS. These will be covered in more detail later, in the relevant sections. It is possible to link to JS files from within the head, and this is a common practice. However, it is generally better to place these at the end of the document if possible. Typically, the structure of an HTML body can be divided into several sections, each possibly having one or more subsections:.

Not all of these sections will be included in every page, or appear the same way. This was once used for every section and subsection of the page contents. Thanks to an extended set of structural tags in the latest HTML standard HTML5 , this can be made easier to read more meaningful to search engines and other systems that extract information from your page like screen readers for the blind.

This section covers HTML tables, including everything you need to know about how to markup various use cases. All the major table elements and attributes are covered, including table headers, footer, body, and columns. This section provides concrete suggestions for dealing with some of the difficulties built in to the table markup and touches on real world practices.

Tables in HTML are two dimensional tables with rows and columns. Tabular data comes in many forms. These three elements alone are enough for a simple table. It is often desirable to put headers at the top of a table. The benefit of this approach is that it doesnt affect the entire row, only those cells which are designated as headers. That is — its a benefit if thats what you want to happen. Perhaps more interestingly, this also allows the body of the table to be styled without affecting the head.

This is useful if you need to style the last row differently than the other rows. Most commonly, this might be used if the last row is a summation or calculation based on the rows above it. Sometimes you need to style a table column. This can be achieved to some extent by using column markup. Columns work a little strangely in HTML. Since tables are written as a series of rows, columns are define as a secondary overlay on the table.

Of course, this adds a lot of markup which isnt strictly required. A better way would be to use the: For example, what if we wanted the First Name column to be bold, and the ages to display in a red,monospace font — along with the other header and footer styles defined earlier?

Learn JavaScript and Ajax with W3Schools.pdf

Sometimes your tabular data doesnt fit neatly into the grid created by a table. If you need a table cell to span two or more columns, use the colspan attribute. If you need to span more than one row, use rowspan. It would look better if the label span the first two cells in the last column.

A similar syntax can be used to span two rows. Well have to add a column for this, since we dont have any good candidates for cell-merging.

Tables are not for layout. Tables should not be used as a convenient way to make columns and headers at the level of a whole document. This is sometimes still an issue today because before the era of standards-based web browsers and semantic markup, many people used tables with a lot of complex style rules to layout HTML documents. This was a bad idea for a number of reasons, even then: Today there is a new reason to avoid this — a reason that trumps all the others: Table-based layout is definitively not responsive, incapable of gracefully scaling to fit various screen sizes.

Besides all of that — compared to the right way of doing things, table-based layout is much more difficult. Just dont do it. One non-data use for tables that is fairly common is side by side translation. Consider the following excerpt from Dantes The Divine Comedy. The benefit of using tables in this example is that each row automatically adjusts its height based on the content in all the cells in the row. This keeps translated content next to its source, even if one language is more verbose than the other.

Many developers use this pattern for translated text, and it is perfectly fine. However, there may be a better way. Using CSS to float the two languages next to each other, and JS to ensure that each pair of paragraphs en-1 and it-2 , etc. The default styles for tables are really quite unattractive, and therefore seldom used. Most front-end UI frameworks like Bootstrap and Skeleton provide highly improved default table styling. Even if you arent using a front-end UI framework, it may be a good idea to pull in the styles for tables from one of the light-weight, modular frameworks.

Tables have a lot of weird styling edge cases that you probably wont cover if you try to fix the styling yourself from scratch. Tables are probably the most complicated markup structure in HTML, and they have been abused in the past in order to serve as containers for layout.

However, when tabular data needs to be displayed on a page, tables are the way to go. This section covers HTML forms in detail. Every variety of form element and user-input interface is covered, along with tips for organizing and styling forms.

An HTML form is a set of UI elements that allow a user to provide data, along with a mechanism for submitting that data to the server. Even in this simple form, we can see there is an opportunity for the user to input data first and last name and the send that data to a server. Forms can become very complicated, and there are many interesting input types now available thanks to HTML5, but no matter how complicated they get, the heart of an HTML form is the same: Before diving in to all the different user interface elements, it would be a good idea to get a clear grasp on how a form functions when sending user data to a server.

A form creates an HTTP request — the same type of request that your browser sends when loading a page. The contents of that request are determined by the values inputted into the form.

The response from the server is essentially the same as the type of response received from a page load — and the browser responds the same way, by loading the response as a new page. In other words: What happens with the requested data is a subject for server-side scripting PHP, Ruby, etc.

These two request types have different meanings, which cause them to behave differently and so they should be used in different situations. A POST is not a request to get something, but rather a request to send or submit something. You can think about posting a letter, posting bail, or posting a sign. If a form is being used to request data and information — such as a search form — and isnt primarily intended to add or edit content, it is probably best to use a GET request.

If a form is being used to submit information, a POST is most likely the right choice. Dont rely on the default — use the correct method for your situation. If the action attribute is omitted, the default URL is the current page. This will still trigger a reload of the page, under normal circumstances.

When a form is submitted to the server, the request — whether it is a POST or a GET — contains the data entered into the form by the user. This data is sent in the form of a series of key-value pairs.

The value for each form element is the data entered by the user. The key for each element is the name attribute for that element. For this reason it is critical that every data-entry element in your form have a unique name attribute.

Some designers do not like to use form labels because they prefer to place the labels text into the input element. For a label element to work properly, the for attribute should contain the value of the id property on the input element.

Green Setting Default Values The value attribute corresponds with current value of a form input element. By including a value for value , you can set a default starting state for any form element. Some developers are tempted to use the value attribute as a way to provide placeholder or user-hint text. This is usually a bad idea, because if the value is not replaced, the placeholder text will be sent to the server, which almost never the desired action. However, if this was for example a profile page, where users can update their own information or leave it the same , then using value this way makes sense.

If the user changes the input data on the form element, the value attribute changes as well. If you were to use JavaScript to get the elements value, you would find it to be the updated value, not the original value in the document source. Most elements can be disabled by adding the disabled attribute to them.

Disabled elements cannot be clicked on or edited. A disabled elements send no value when the form is submitted, so be careful about using this to display for example profile data you dont want the user to change.

The most basic and default input type is text. This defines a single-line text input as would be used for a username in a log-in form or to enter a query in a search form. The second most basic input type is the submit input, which defines the forms submit button.

This can be changed with the value attribute. Another input type creates a similar GUI as the submit type — the button type. However, do not use the button for generic form submission. It wont work. And dont use the submit button for generic buttons within a form — itll work the wrong way. If you want to obscure the characters entered into a text input, use the password type. Several input types create the same GUI — a box to type text into — but create different conditions for validating input.

For example, the email type checks to make sure that the data entered conforms to standard email address format some text, followed by the sign, followed by text that encompasses at least one dot. These values are validated when the form is submitted, unless the novalidate attribute is specified on the form, or the formnovalidate attribute is specified on the individual elements.

These UI elements are browser based, and not universally supported. Square Circle Triangle Color Red Blue Green The value submitted to the server for each name is the contents of the value attribute of the selected radio button for each pair. Any labeling is for the user only, and has no effect on the value passed to the server.

This makes the label text clickable, which is easier to use. The checkbox input type can be used to define one of two types of input controls that both look like checkboxes. The first type is a single key which may have several value sometimes called multi-select. To create an array of values which may be assigned to the same key, simply create a group of checkbox inputs with the same name attribute. Red In this example, multiple color selections can be made.

They will each be sent to the server as individual parameters in the request. Of course, any value would work, as long as the server-side code knows how to interpret the presence of the attribute. For example, in the colors example above, if none of the options were checked, the submitted data would not include any reference to the color input key. Not even an empty set. A button can be created in a form using the input type of button.

Unlike other input types, this carries no specific meaning within a form, and is usually used only to trigger some JavaScript action. In browsers that support it, clicking on this element brings up a GUI for selecting a color. Also new in HTML5, and also dependent on browser support, is the range input. This input appears as a slider, which the user can move horizontally.

The input element needs to define the highest and lowest value in the range. The value set by the user will be submitted with the form. The image input replaces a submit button, allowing you to use an image as the button. In addition to simply changing the way the button works, the submission request also includes the X and Y coordinates of the users click within the image.

This allows the submission form to acts as a server-side image map. A form can include a file-upload input with the file type. The exact display and functionality of the file-upload GUI is controlled by the browser. File handling where the file will be saved also has to be specified on the server-side.

You can limit the files accepted by the file input by using the accept attribute, which allows you to specify either a list of extensions or a list of MIME types. Browser support for file-extension is not universal, so the MIME-type list is probably the better way to go. See this list of MIME types for details. Even if you use the accept attribute to limit the file extensions which can be uploaded through the form, it is important to verify both the file type and the file contents on the server.

For at least two reasons:. You can designate a non-visible input element, whose value will be included when the form is submitted, by using the type of hidden. The most common use for a hidden input is as a holder for a value generated elsewhere on the page, usually through JavaScript. User interaction on the page causes a value to be assigned to the hidden input, which is then included in the form submission.

Some of them are only applicable to particular input types, and others can be used with any input. It will be seen by the user. If the user doesnt change it, it will be submitted with the form. What is your favorite color? Red Blue Green Yellow. Red Blue Yellow. The default display of form elements in most browsers is extremely unattractive. Some of the problems — like vertical height and spacing, are dealt with in some of the more popular CSS Resets, but not all of them.

If you are going to build a CSS Style Sheet for your project from scratch, be sure to create several detailed example forms, using all of the form elements in a variety of combination.

General HTML

Be especially mindful of multi-column forms. Because of the difficulties of form styling, it is often a good idea to use the form styles from a popular front end framework. Though this is not a complete guide to the subject, it provides a fairly in-depth conceptual look at site design.

It is a language used to define how an HTML document should be displayed on a page. There are specific instances where embedded styles make sense email, for example but the general rule of thumb is — if you can link to a stylesheet, you should. Many people simply think of an HTML document as a linear structure: In CSS, some style declarations affect the size or shape of the element itself. This has no effect on the elements inside it. But other styles affect the contents of the element — styles like text color, background color, font size, spacing.

All the contents, including other elements, are affected unless a different style declaration overrides it at a more specific point. In this case, the first line anchor inside a headline will be blue, while the other will be green. But then, inside of that, is an anchor that styles text blue. The anchor is more specific — closer to the text being styled — so its blue styling prevails. The opposite is the case in the second example. Every CSS declaration begins with a selector.

This can be a type of element, a class, and ID, or a number of other things. There is way to target just about any element in a document — not just by class and ID, but by location in a document, context, other attributes.

Block-level elements are HTML elements which have width and height and by default a line break before and after. They represents blocks of content. This is in contrast to inline elements, which represent spans of text and do not create new lines by default. You can also cause any element to behave like a block-level element by assigning it the style display: That is, the entire elements, including margin, border, and padding, will fit inside its container.

The default height of a block-level element is the height of all its content, plus any margins, border, or padding. Most of the time, in designing a page layout, you want to specify the width of elements, but not their height. This is because the width of a display window is a fixed size on any given display, but the page can scroll up and down along any height. The weird thing about specifying width and height, but you dont do it as often is that the width you specify will not be the total width of the element.

In addition to the content of an element, the total width and total height are determined by three other attributes:. Any background declarations such as background , background-color , or background-image cover the content area, the padding, and the border. The margin does not display the background. Margin, border, and padding are added to the width declared by the CSS.

This is a quirk of CSS. To push the inside element away from the top of its container you would add padding to the containing element. Because the total width includes the declared width and also the width of any margins, border, and padding, the following declaration does not work:.

This will cause the element to simply fill the width of its container automatically, with no overflow. However, if you want to have an element that only takes up half of the available width, in order to have side-by-side columns, youll have to do thing a little differently. The default behavior of block level elements is for them to fill the full width of their container and create a line break before and after themselves.

IF you place several block level elements in a series, they will simply appear straight down the page, each one below the previous one:. A block element can be floated to the left, right or center center is unusual. If multiple sibling elements are set to float, they will line up next to each other, separated by their margins. To make these three colored boxed site next to each other, we just need to add float: But — oh no — what is going on with the container element?

Why are the colored blocks hanging out of it? Heres the problem with floats: So the height of the container is determined by the sum of:. The inner height of the container element in this case is zero, and the total height is only 2x the size of its padding. This is a very annoying, and very common, problem.

The solution a bit of a hack is called the clearfix solution. There are several options for how to acocmplish this, but for our examples we are going to use the simplest one, adding overflow: This does not work in all browsers or in all contexts, but it will work well enough on most browsers that it is fine for our examples here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium, mi eu elementum ullamcorper, dui justo egestas turpis, sed auctor turpis tellus eget augue.

Quisque vel malesuada erat. Vestibulum non felis et turpis iaculis iaculis. In arcu metus, finibus id dolor a, interdum lacinia lectus. Vestibulum vulputate neque eget ante tincidunt sodales.

Quisque efficitur a turpis nec scelerisque. Donec commodo, diam id consequat sodales, justo quam posuere libero, non fringilla ante dui id tortor. Sed efficitur in ipsum nec pellentesque. In a perfect world, every element in an HTML document would be semantically significant, related only to the content of the document, and never added solely to support presentational styles. The real world is far from perfect, unfortunately. It will often be the case that similar container elements are needed in order to get a page to display correctly.

Dont worry about it — the web is as much a visual medium as it is a collection of text-based documents. CSS is used for all aspects of document presentation, including both page structure and text styling.

There could be a whole book on CSS and typography, but a short introduction to key concepts will do for this guide. When thinking about text styling in CSS, it is especially important to remember the cascade part of Cascading Style Sheets.

When you add a style that affects contents as opposed to element shape, size, or placement , the style cascades down the document tree. The practical implication of this is that you should build your stylesheet from the general to the specific.

Any style declaration having to do with typography should be included at the most general highest in the tree point that it applies to. This will help avoid duplicating styles.

Specifies the font s to use. Best practice is to declare a list of font, starting with your preferred font and a series of fallbacks, ending with a a generic font family. Font names that include spaces must be wrapped in quote marks. Garamond, Georgia, "Times New Roman", serif;. Specifies the size of the text. Specifies the height of a line of text. This should usually be larger than the font-size. A line of text is typically centered inside the line-height.

Line height can be specified in pixels, ems, or percentages. It can also be set as a multiplier of the font-size; this is done by omitting a units suffix. The margin below paragraphs, headlines, lists, and other typographical elements contributes to the overall readability. This attribute has to be set on each affected element, not on the document or section. Typically, setting the margin-bottom equal to the line-height created the best results.

The default color of text is black. You may wish to change this to a something less stark. Also, links have a set of default colors to denote whether or not they have been visited, and a color denoting their active state. Typically, the default link color is not particularly desirable.

In order to change color for various states of the anchor tag use: Font-weight is the property that controls whether text is bold or normal. According to the specification, you can use a numeric value to set the weight with great precision. However, this is not well supported by most fonts or browsers, and it it not a common practice. The most common use of font-weight is to simply specify bold.

Font style is used to indicate italic type.

download for others

Relevant values are normal and italic. A third option, oblique , is rarely used. This is used to add a line to a span of text: This property allows you to control the capitalization of text. Relevant values are: This is used to specify small-caps. It sets all the lowercase letters in the content to uppercase letters at a smaller font size. This is not a property assigned to an element, but acts as a selector in a CSS document. It is used to define a new font family.

This allows designers to specify any font they wish, instead of just relying on the system fonts of client computers. The font-family property defines the name of the new font to be used in the font-family property of other elements , and the src property specifies a font file. Not all font file formats are supported on all browsers. If variations of a font bold, italic require separate font files, multiple font-face declarations can be set, each one with a different src property, and with additional properties specifying their context for example — font-weight: Web typography is tricky.

The default display of text in most browsers is really unattractive, and getting text to look good, and be readable, is a non-trivial problem.

You might also like: HTML5 E CSS3 GUIDA COMPLETA PDF

For simple effects, this can be quite convenient. It renders faster than similar effects created in Javascript, and will be supported even in browsers that have Javascript disabled.

An animation is defined with a CSS selector called keyframes. An keyframes declaration has a name, and a set of style rules for various points key frames in the animation. More than color can be animated.

Using the keyframes rules to set positions will cause an affected element to move from one place to another. This animation would cause an animated element to move over, down, back over, and then back up to its original position. Animations are defined separately from the elements they will affect.

Animations are defined in keyframes declarations as shown above, and then applied to elements. Animations are applied to elements using the keyframe name and a length of time that the animation should last. Other attributes can affect the animation as well. If you dont set the animation-duration , the animation will not run, because the default value is 0. In order to make sure that animations will work on those browsers, you have to duplicate the keyframes declaration and the animation assignment attributes with a special webkit syntax.

In the live examples above, these additional styles have been added to the running demo code, but not the code examples, just to make it less complicated. This may seem redundant and silly because it is , but its the only way to get your animations to work in those browsers.

If you need highly dynamic elements flying around the screen like an arcade game, CSS animations are not really the way to go — thats more appropriate to Javascript. CSS animations are best used to provide subtle design enhancements to a page. Some examples: CSS animations either start immediately, or after a specified delay.

Pausing an animation is done with the attribute animation-play-state. The value for animation-play-state when unpaused is running.

This can be manipulated in Javascript:. In the real world of web development and design, very few developers sit down with an HTML document and a blank CSS file and start specifying styles from scratch. Though doing so can certainly be fun. All HTML elements have default styles set by their browser. Each browser has slightly different default styles. This means that a single document with a single stylesheet may look different in different browsers.

Aside from issues of support and compatibility. The CSS resent provides a common base for adding styles across all browsers. There are several common CSS reset templates. The most well known is the one created by Eric Meyer.

Imagine that you define a set of colors for your website design and want to use them in various places throughout your CSS. If you apply the same color to your secondary headlines that you do to your copyright notice and so forth , youll end up duplicating the color declaration in several different places.

What about a scale of text size? Youve set your default text size to 12px, and each headline size is a specific multiple of that size to make a unified set of sizes. What happens when you change the default size?

CSS is a declarative language — it requires each individual property and value to be specified, and there are no variables, functions, or calculations to make things easier.

In the same way PHP and other languages make it easier to output HTML without having to repeat content on every page, CSS preprocessors allow you to include variables, function, and other programming constructs into stylesheets.

This makes it easier to specify color schemes, size ratios, and other types of repetitive declarations. The two most popular CSS preprocessors are: Generally, developers write their stylesheets in Less or Sass and then compile them into CSS before launching a site. There are also client-side in-browser compilers written in Javascript, but these use a lot of resources and are typically only sed in development. This guide cannot serve as an introduction to either of these tools, so we simply encourage you to learn more yourself.

Users may be viewing your site on any one of a number of devices and screen sizes: It is nearly impossible to individually target all these different screen sizes, and you cant simply ignore them. You may think that your sites demographic is more likely to view with a desktop, but thats unlikely to be true in any situation. Having a website with a bad mobile experience is going to be bad for your business. Whats more, Google has begun to alter its search results based on whether sites are optimized for mobile devices or not.

Increasingly, if you dont look good in mobile, no one will see you anyway. Responsive design is an approach to site design — a philosophy — not a tool or a program. It is a way of structuring page markup and CSS so that the pages elements will reconfigure appropriately in different size windows. Fluid Grids: Fluid grids involves dividing page grids based on percentages, rather than absolute pixels. As the screen increases or decreases in size, the grid also expands or shrinks. Fluid Images: Images should never be wider than the screen they are being displayed on, which means they should never be wider than the grid element containing them.

Media Queries: Media queries are a bit more complicated. They allow CSS to target specific screen types and sizes, declaring rules that only apply in particular circumstances. Using media queries, you can make your main content and sidebar appear side-by-side on larger screens, and make them stack on top of each other vertically on smaller screens.

Media queries can also be used to hide or display certain elements which would be more or less useful in different contexts, as well as change things like font sizes or even swap out different images.

Responsive web design is built on simple concepts but the actual implementation of it — attempting to get it right in so many different contexts, with different screen sizes, device types, and browsers — is actually very complicated and difficult.

For this reason, and other reasons, many designers working today do not try to solve these problems themselves but choose to use a front end framework. There are a lot of things to think about when coding the CSS for a site design, and this short introduction only touched on a bit of it. For these reasons, and following the similar trend in application code development, more and more developers are turning to front-end frameworks.

A front-end framework provides one or more HTML document structures and a complete CSS stylesheet that handles some or all the basic needs listed above. This frees the developers to focus on actual design decisions, instead of trying to get the media-queries to work properly. As with application development frameworks, there are a wide range of possibilities.

Hyphens: auto; turns on hyphenation, and the Prince-specific directives control when to hyphenate. Orphans and widows affect readability. Fortunately, PrinceXML supports widow and orphan control. The final two lines of the above CSS declares that a minimum of two lines of a paragraph must be together. In the case of first line alone, PrinceXML will move it to the next page. In the case of last line alone, PrinceXML will move the previous line to the current page.

Now let's change gears and look at visual alignment of lines. Here's an example of visual alignment gone bad: Figure 4: Line alignment gone wrong. Alignment is good at the top, then becomes bad at the bottom.

This will drive designers and those with OCD insane. In the example above, we can see that the two pages start out in alignment. Then the left hand page contains a section of email, and the alignment is off, as we can see with the orange line. And the alignment is still off when we get to the red line.

Why did that happen? There was an error in the original CSS code: div. But our body text has a line-height of 16 point. When we encounter the top-margin, the left page is suddenly 4 points off the right page. After we encounter the bottom-margin, the left page is 8 points off the right page. To maintain alignment, everything must happen on at the same interval as the line-height, which we set to 16 point. So any images, margins, open space, or special text must be specified such that it is positioned on 16 point boundaries.

For the email example, it would be acceptable to have a top-margin of 16 points, but not 12 points. The last piece I want to discuss are drop caps. Marking the start of text with a large letter dates back 2, years to hand-lettered manuscripts. The Smashing Magazine article describes a variety of approaches. This was in case I needed to address the spacing around the letter, as described in the Smashing Magazine article. I didn't use it, but it's there just in case. By the way, the HTML didn't start out with that structure.

HTML for Beginners: Learn To Code HTML Today

The full scope of HTML parsing is outside the scope of this article, but here's the ruby code to wrap the opening quote and first letter with the appropriate spans: def self. But the approach can be leveraged to any content you'd like to format for print. Finally, I showed how to format the body text, which is relatively simple, but has big implications for readability. And closed with drop caps, which is a nice visual element that readers expect and which adds to the perceived quality of the printed material.

I simply like their product. If you enjoyed the article or have requests for future ones, please let us know in a comment!This can be used for numbers or for other types.

The AJAX pattern doesnt make any sense on most pages, but on web apps like email, for example , it can make all the difference in the world. However it simply does not work.

What is a Markup Language? There are several other empty tags. Heading 2 element.

CSS Frameworks can make it possible for nearly anyone to create responsive, functioning websites, but only someone with their own depth of understanding of CSS and HTML will be able to get the most use out of one.

This is sometimes still an issue today because before the era of standards-based web browsers and semantic markup, many people used tables with a lot of complex style rules to layout HTML documents.

Search engines hate it and it is generally a bad idea. The keygen element was also added in HTML5 as way to authenticate users.

FREDERICKA from Buffalo
I enjoy studying docunments tightly. Please check my other articles. One of my hobbies is deer hunting.
>