Knowledge in Html
HTML Basic
HTML Basic Examples Don't worry if these examples use tags you have not learned. You will learn about them in the next chapters. ________________________________________ HTML Documents All HTML documents must start with a document type declaration: . The HTML document itself begins with and ends with . The visible part of the HTML document is between and . Example My First Heading My first paragraph.
yash sharma
HTML Background Images
Background Images A background image can be specified on almost any HTML element. To add a background image in HTML, use the CSS property background-image. ________________________________________ Background Image on a HTML element To add a background image on an HTML element, you can use the style attribute: Example Add a background image on a HTML element: Try it Yourself » You can also specify the background image in the element: Example Specify the background image in the style element: div { background-image: url('img_girl.jpg');
HTML The class Attribute
Using The class Attribute The HTML class attribute is used to define equal styles for elements with the same class name. So, all HTML elements with the same class attribute will get the same style. Here we have three elements that point to the same class name: Example .cities { background-color: black; color: white; margin: 20px; padding: 20px; } London London is the capital of England. Paris Paris is the capital of France. Tokyo Tokyo is the capital of Japan.
HTML Comments
HTML Comments Comment tags are used to insert comments in the HTML source code. ________________________________________ HTML Comment Tags You can add comments to your HTML source by using the following syntax: Notice that there is an exclamation point (!) in the opening tag, but not in the closing tag. Note: Comments are not displayed by the browser, but they can help document your HTML source code. With comments you can place notifications and reminders in your HTML: Example This is a paragraph. Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors: Example
HTML Styles
HTML Styles HTML Styles - CSS CSS = Styles and Colors Manipulate Text Colors, Boxes ________________________________________ Styling HTML with CSS CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once. CSS can be added to HTML elements in 3 ways: • Inline - by using the style attribute in HTML elements • Internal - by using a element in the section • External - by using an external CSS file The most common way to add CSS, is to keep the styles in separate CSS files. However, here we will use inline and internal styling, because this is easier to demonstrate, and easier for you to try it yourself. Tip: You can learn much more about CSS in our CSS Tutorial. ________________________________________ Inline CSS An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses the style attribute of an HTML element. This example sets the text color of the element to blue:
HTML Editors
HTML Editors Write HTML Using Notepad or TextEdit Web pages can be created and modified by using professional HTML editors. However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac). We believe using a simple text editor is a good way to learn HTML. Follow the steps below to create your first web page with Notepad or TextEdit. ________________________________________ Step 1: Open Notepad (PC) Windows 8 or later: Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad. Windows 7 or earlier: Open Start > Programs > Accessories > Notepad ________________________________________ Step 1: Open TextEdit (Mac) Open Finder > Applications > TextEdit Also change some preferences to get the application to save files correctly. In Preferences > Format > choose "Plain Text" Then under "Open and Save", check the box that says "Display HTML files as HTML code instead of formatted text". Then open a new document to place the code. ________________________________________
HTML Entities
HTML Entities Reserved characters in HTML must be replaced with character entities. Characters that are not present on your keyboard can also be replaced by entities. ________________________________________ HTML Entities Some characters are reserved in HTML. If you use the less than () signs in your text, the browser might mix them with tags. Character entities are used to display reserved characters in HTML. A character entity looks like this: &entity_name; OR &#entity_number; To display a less than sign (
HTML File Paths
HTML File Paths A file path describes the location of a file in a web site's folder structure. File paths are used when linking to external files like: • Web pages • Images • Style sheets • JavaScripts ________________________________________ Absolute File Paths An absolute file path is the full URL to an internet file: Example Try it Yourself » The tag is explained in the chapter about HTML Images. ________________________________________ Relative File Paths A relative file path points to a file relative to the current page. In this example, the file path points to a file in the images folder located at the root of the current web: Example Try it Yourself » In this example, the file path points to a file in the images folder located in the current folder: Example
HTML Head
HTML Head The HTML Element The element is a container for metadata (data about data) and is placed between the tag and the tag. HTML metadata is data about the HTML document. Metadata is not displayed. Metadata typically define the document title, character set, styles, scripts, and other meta information. The following tags describe metadata: , , , , , and .
HTML Picture Element
HTML Picture Element The picture element allows us to display different pictures for different devices or screen sizes. ________________________________________
HTML The id Attribute
Using The id Attribute The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). The id value can be used by CSS and JavaScript to perform certain tasks for the element with the specific id value. In CSS, to select an element with a specific id, write a hash (#) character, followed by the id of the element: Example Use CSS to style an element with the id "myHeader": #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } My Header Result: My Header Try it Yourself » Tip: The id attribute can be used on any HTML element. Note: The id value is case-sensitive. Note: The id value must contain at least one character, and must not contain whitespace (spaces, tabs, etc.). ________________________________________
HTML Image Maps
HTML Image Maps With image maps, you can add clickable areas on an image. ________________________________________ Image Maps The tag defines an image-map. An image-map is an image with clickable areas. Click on the computer, the phone, or the cup of coffee in the image below: