- Saved searches
- Use saved searches to filter your results more quickly
- amuhaiminshah/HTML-and-CSS-crash-course
- Name already in use
- Sign In Required
- Launching GitHub Desktop
- Launching GitHub Desktop
- Launching Xcode
- Launching Visual Studio Code
- Latest commit
- Git stats
- Files
- README.md
- Absolute URLs
- Relative URLs
- Relative URLs
Saved searches
Use saved searches to filter your results more quickly
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
amuhaiminshah/HTML-and-CSS-crash-course
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Sign In Required
Please sign in to use Codespaces.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Launching Visual Studio Code
Your codespace will open once ready.
There was a problem preparing your codespace, please try again.
Latest commit
Git stats
Files
Failed to load latest commit information.
README.md
HTML stands for Hyper Text Markup Language.
HyperText Markup Language (HTML) is the set of markup symbols or codes inserted into a file intended for display on the Internet. The markup tells web browsers how to display a web page’s words and images.
HTML is the standard markup language for creating Web pages.
HTML consists of a series of elements.
HTML elements tell the browser how to display the content that this is heading (h1, h2, h3, h4, h5, h6) and this is a paragraph and this is link and this is an image etc.
NOTE There is no space between the angle bracket and tagname you have to remember.
Explanation of this image
An HTML element is defined by a start tag, some content, and an end tag:
< tagname >content goes here. < /tagname >
The HTML element is everything from the start tag to the end tag:
< h1 >My First Heading < /h1 >
< p >This paraghraph. < /p >
Starting tag Element content End tag < h1 >My First Heading < /h1 > < p >My first paragraph. < /p > < br >none none
Note: Some HTML elements have no content (like the < br >element). These elements are called empty elements. Empty elements do not have an end tag!
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.
A browser does not display the HTML tags, it only display the content which is inside the tag.
How to save the HTML work in Windows
Mostly people will be tinking where to write the code if you are beginner so first use Notepad or Text Editor.
How to use the Notepad or Text editor?
First write the following HTML code.
Then save the file on your computer and Name the file «index html.»
Open the save file on browser(right click on file and choose the open with any browser you have in your computer.
Your browser will looks like this:
HTML headings are defined with the to tags.
< h1 >defines the most important heading. < h6 >defines the least important heading NOTE: There are 6 heading in HTML.
HTML paragarphs are defined with the < p >tag:
HTML link are defined with the < a >tag:
HTML Images are defined with the < img >tag.
The source file ( src ), alternative text ( alt ), width, and height are provided as attributes:
Have you ever seen a Web page and wondered «Hey! How did they do that?»
Right-click in an HTML page and select «View Page Source» (in Chrome) or «View Source» (in Edge), or similar in other browsers. This will open a window containing the HTML source code of the page.
Right-click on an element (or a blank area), and choose «Inspect» or «Inspect Element» to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.
The tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to.
The src, width, height and alt attributes
The tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed.
The tag should also contain the width and height attributes, which specifies the width and height of the image (in pixels).
The required alt attribute for the tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to slow connection, or an error in the src attribute, or if the user uses a screen reader.
The style attribute is used to add styles to an element, such as color, font, size, and more.
HTML headings are defined with the to tags.
defines the most important heading. defines the least important heading.
You know that how to write the code for heading.
Each HTML heading has a default size. However, you can specify the size, font family, background-color etc for any heading with the style attribute.
This element define paragraph.
With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code.
The browser will automatically remove any extra spaces and lines when the page is displayed.
The tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
This command is used to brake the line. It has no end tag.
Starting tag. < /pre > Closing tag. (pre) Defines pre-formatted text. The text inside a element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.
The HTML style attribute is used to add styles to an element, such as color, font-family, , font-size, and more.
How to write the Syntax for style
The property is a CSS property. The value is a CSS value.
Background-color, color, font-family, text-size, text-alignment
MHTML contains several elements for defining text with a special meaning.
In this chapter we are going to cover the following elements:
Comments can be used to hide content.
Which can be helpful if you hide content temporarily
< p >This is a first paragraph.< /p >
< p >This is a last paragraph too.< /p >
In HTML color can specified by using color name. You can use website or extension for color.
Click here You can use this website for generate different type of color.
Tip: Just simply copy the code of color and use it.
You can use the color to make the text colorful, background, border etc.
For borders the syntex is like this:
< h1 >style=»border:value color name;» > Hello World < /h1 >
In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.
rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color with a value between 0 and 255.
This means that there are 256 x 256 x 256 = 16777216 possible colors!
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255), and the other two (green and blue) are set to 0.
Another example, rgb(0, 255, 0) is displayed as green, because green is set to its highest value (255), and the other two (red and blue) are set to 0.
To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
To display white, set all color parameters to 255, like this: rgb(255, 255, 255).
rgba(red, green, blue, alpha) Here alpha specifies the opacity for a color.
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).
There are HEX, HSL, HSLA values if you want to learn more about the color these values so try to search in google.
CSS stands for Cascading Style Sheets.
CSS saves a lot of work. It can control the layout of multiple web pages all at once. Cascading Style Sheets (CSS) is used to format the layout of a webpage.
With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more! Tip: The word cascading means that a style applied to a parent element will also apply to all children elements within the parent. So, if you set the color of the body text to «blue», all headings, paragraphs, and other text elements within the body will also get the same color (unless you specify something else)!
CSS can be added to HTML documents in 3 ways:
An inline CSS uses the style attribute of an HTML element.
An internal CSS is defined in the section of an HTML page, within a element.
< !DOCTYPE html > < html > < head > < style >body h1 p < /style > < /head > < body >< h1 >This is a heading < /h1 >< p >This is a paragraph. < /p > < /body > < /html >
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the section of each HTML page
< !DOCTYPE html > < html > < head > < /head > < body >< h1 >This is a heading < /h1 >< p>This is a paragraph. < /p > < /body > < /html >
The external style sheet can be written in any text editor.
NOTE: With an external style sheet, you can change the look of an entire web site, by changing one file!
How to Link to external CSS?
External style sheets can be referenced with a full URL or with a path relative to the current web page.
HTML links are hyperlinks.
You can click on a link and jump to another document.
NOTE: A link does not have to be text. A link can be an image or any other HTML element.
The HTML tag defines a hyperlink. It has the following syntax:
The most important attribute of the element is the href attribute, which indicates the link’s destination. The link text is the part that will be visible to the reader. Clicking on the link text, will send the reader to the specified URL address.
By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link. The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
Absolute URLs vs. Relative URLs
A local link (a link to a page within the same website) is specified with a relative URL (without the «https://www» part):
Absolute URLs
github.com/amuahiminshah
Relative URLs
Relative URLs
HTML Images
CSS Tutorial
Use mailto: inside the href attribute to create a link that opens the user’s email program (to let them send a new email)
The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.