שפת הסימון של HyperText (HTML) היא שפת סימון המשמשת לבניית מסמכים מקוונים והיא הבסיס לרוב האתרים כיום. שפת סימון כמו HTML מאפשרת לנו
- ליצור קישורים למסמכים אחרים,
- לבנות את התוכן במסמך שלנו, וכן
- לייחס את הקשר והמשמעות לתוכן המסמך שלנו.
למסמך HTML יש שני היבטים. הוא מכיל מידע מובנה (Markup) וקישורי טקסט (HyperText) למסמכים אחרים. אנו בונים את הדפים שלנו באמצעות אלמנטים של HTML. הם מבנים את השפה המספקת מבנה ומשמעות במסמך שלנו עבור הדפדפן והאלמנט מקשר למסמכים אחרים ברחבי האינטרנט.
האינטרנט נוצר במקור בכדי לאחסן ולהציג מסמכים סטטיים (ללא שינוי). ההיבטים של HTML שנדונו לעיל נראו בצורה מושלמת במסמכים אלה אשר חסרו כל עיצוב ועיצוב. הם הציגו מידע מובנה שהכיל קישורים למסמכים אחרים.
HTML5 הוא הגרסה האחרונה, או המפרט, של HTML. הקונסורציום העולמי (W3C) הוא הארגון האחראי על פיתוח סטנדרטים עבור האינטרנט, כולל אלה עבור HTML. ככל שדפי אינטרנט ויישומי רשת הופכים מורכבים יותר, W3C מעדכן את הסטנדרטים של HTML.
HTML5 מציג שורה של אלמנטים סמנטיים. למרות שדנו כיצד HTML עזר לספק משמעות למסמך שלנו, רק בהכרת אלמנטים סמנטיים של HTML5s מומש הפוטנציאל שלו.
דוגמה פשוטה למסמך HTML
Page Title My First Heading
My first paragraph.
! DOCTYPE html: מגדיר מסמך זה כ- HTML5
html: אלמנט הבסיס של דף HTML
head: האלמנט מכיל מטא מידע על המסמך
title: האלמנט מציין כותרת למסמך
גוף: האלמנט מכיל את תוכן העמוד הגלוי
h1: האלמנט מגדיר כותרת גדולה
p: האלמנט מגדיר פיסקה
הדרכות להתחלה ב- HTML ו- HTML5
המקום הטוב ביותר להתחיל ללמוד HTML הוא בהדרכת שעתיים של freeCodeCamp למדריכת HTML.
ואז, אם אתה מרגיש הרפתקני יותר, יש לנו קורס שלם של 12 שעות המכסה HTML, HTML5 ו- CSS בפירוט.
מבנה עמוד
כדי ליצור את הדפים שלך HTML, עליך לדעת כיצד לבנות דף HTML. בעיקרון, מבנה העמוד עוקב אחר הסדר שלהלן:
Title of the Page 1 - ההצהרה חייבת להיות תמיד הראשונה שתופיע HTMLבדף ותאמר לדפדפן באיזו גרסת השפה משתמשים. במקרה זה, אנו עובדים עם HTML5.
2 - The ואת התגים לספר את דפדפן האינטרנט שבו HTMLמתחיל קוד קצוות.
3 - The ואת התגים מכילים מידע על אתר האינטרנט, למשל: סגנון, מטא תגים, סקריפטים, וכו '...
4 - The ואת התגים להגיד לדפדפן מה כותרת הדף היא. ניתן לראות את הכותרת על ידי זיהוי הכרטיסייה בדפדפן האינטרנט שלך. הטקסט המוגדר בין התגים הללו הוא גם הטקסט המשמש ככותרת על ידי מנועי החיפוש כאשר הם מציגים את העמודים בתוצאות החיפוש.
5 - בין לבין תגיות התוכן בדף מושם, וזה מה מוצג בדפדפן.
שינויים ב- HTML5
הצגת תגים סמנטיים
במקום להשתמש עבור כל מכולה אחרת, ישנם מספר סמנטי (תגים אלה עוזרים לקוראי מסך המשמשים לקויי ראייה) תגים כגון . לכן מומלץ להשתמש בתגיות אלו במקום בגנריות .
אלמנטים HTML
אלמנטים הם אבני הבניין של HTML המתארות את המבנה והתוכן של דף אינטרנט. הם החלק ה"סימון "של שפת הסימון של HyperText (HTML).
תחביר HTML משתמש בסוגריים הזוויתיים ("") כדי להחזיק את שמו של אלמנט HTML. לאלמנטים יש בדרך כלל תג פתיחה ותג סגירה, ומספקים מידע על התוכן שהם מכילים. ההבדל בין השניים הוא שבתג הסגירה יש קו נטוי קדימה.
הנה דוגמה לשימוש באלמנט p (
This is a paragraph.
Opening and closing tags should match, otherwise the browser may display content in an unexpected way.
Self-closing Elements
Some HTML elements are self-closing, meaning they don’t have a separate closing tag. Self-closing elements typically insert something into your document.
An example is the br element (
), which inserts a line break in text. Formerly, self-closing tags had the forward slash inside them (
HTML Element Functionality
There are many available HTML elements. Here’s a list of some of the functions they perform:
give information about the web page itself (the metadata)structure the content of the page into sectionsembed images, videos, audio clips, or other multimediacreate lists, tables, and formsgive more information about certain text contentlink to stylesheets which have rules about how the browser should display the pageadd scripts to make a page more interactive and dynamic
Nesting HTML Elements
You can nest elements within other elements in an HTML document. This helps define the structure of the page. Just make sure the tags close from the inside-most element first.
Correct:
This is a paragraph that contains a span element.
Incorrect:
This is a paragraph that contains a span element.
Block-level and Inline Elements
Elements come in two general categories, known as block-level and inline. Block-level elements automatically start on a new line while inline elements sit within surrounding content.
Elements that help structure the page into sections, such as a navigation bar, headings, and paragraphs, are typically block-level elements. Elements that insert or give more information about content are generally inline, such as links or images.
The HTML Element
There’s an
Here’s an example of a page with a head element, a body element, and one paragraph:
I'm a paragraph
The HEAD Element
This is the container for processing information and metadata for an HTML document.
The BODY Element
This is a container for the displayable content of an HTML document.
...
The P Element
Creates a paragraph, perhaps the most common block level element.
...
The A(Link) Element
Creates a hyperlink to direct visitors to another page or resource.
...
Images in HTML
You can define images by using the ![]()
src - This attribute provides the url to the image present either on your P.C./Laptop or to be included from some other website. Remember the link provided should not be broken otherwise the image will not be produced on your webpage.
alt - This attribute is used to overcome the problem of broken image or incapability of your browser to produce image on webpage. This attribute, as the name suggests, provides an “Alternative” to an image which is some ‘TEXT’ describing the image.
Example
To define height and width of an image you can use the height and width attribute:
You can also define border thickness (0 means no border):
Align an image:
You are also able to use styles within a style attribute:
How to use links in HTML
In HTML you can use the freeCodeCamp to create a link to freeCodeCamp’s website.
Links are found in nearly all web pages. Links allow users to click their way from page to page.
HTML links are hyperlinks. You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
Note: A link does not have to be text. It can be an image or any other HTML element.
In HTML, links are defined with the tag:
link text
Example
Visit our site for tutorials
The href attribute specifies the destination address (//www.freecodecamp.org) of the link.
The link text is the visible part (Visit our site for tutorials).
Clicking on the link text will send you to the specified address.
How to Use Lists in HTML
Lists are used to specify a set of consecutive items or related information in a well formed and semantic way, such as a list of ingredients or a list of procedural steps.
HTML markup has three different types of lists - ordered, unordered and description lists.
Ordered Lists
An ordered list is used to group a set of related items, in a specific order. This list is created with
tag.Code
- Mix ingredients
- Bake in oven for an hour
- Allow to stand for ten minutes
Example
- Mix ingredients
- Bake in oven for an hour
- Allow to stand for ten minutes
Unordered Lists
An unordered list is used to group a set of related items, in no particular order. This list is created with
-
tag. Each list item is surrounded with
tag.Code
- Chocolate Cake
- Black Forest Cake
- Pineapple Cake
Example
- Chocolate Cake
- Black Forest Cake
- Pineapple Cake
Description Lists
A description list is used to specify a list of terms and their descriptions. This list is created with
-
tag. Each list item is surrounded with
-
tag.Code
- Bread
- A baked food made of flour.
- Coffee
- A drink made from roasted coffee beans.
Output
Bread A baked food made of flour. Coffee A drink made from roasted coffee beans.
Styling List
You can also control the style of the list. You can use
list-styleproperty of lists. Your list can be bullets, squares, in Roman numerals, or can be images if you want.list-styleproperty is shorthand forlist-style-type,list-style-position,list-style-image.
tag. Each list item is surrounded with