Най-добрите примери за HTML и примери за HTML5

HTML осигурява структурата на уебсайтовете. Ето някои примери за това как да използвате HTML синтаксис за изграждане на уебсайтове, включително някои примери за по-нови функции на HTML5.

Пример за атрибут A Href

В атрибута се отнася до дестинация, предоставена от връзка. Най- a(котва) маркер е мъртъв, без да е атрибут. Понякога в работния си процес не искате връзка на живо или все още няма да знаете дестинацията на връзката. В този случай е полезно да зададете hrefатрибута, за "#"да създадете мъртва връзка. В hrefатрибут може да се използва за връзка към локални файлове или файлове в интернет.

Например:

  Href Attribute Example   

Href Attribute Example

The freeCodeCamp Contribution Page shows you how and where you can contribute to freeCodeCamp's community and growth.

В атрибута се поддържа от всички браузъри.

Още атрибути:

hreflang: Указва езика на свързания ресурс. target: Указва контекста, в който ще се отвори свързаният ресурс. title: Определя заглавието на връзка, която се показва на потребителя като подсказка.

Примери

This is a dead link This is a live link to freeCodeCamp more with a href attribute

Котчета в страницата

Също така е възможно да зададете котва на определено място на страницата. За да направите това, първо трябва да поставите раздел на място на страницата с етикет и необходимия атрибут “name” с описание на ключова дума в него, като това:

Всяко описание между таговете не е задължително. След това можете да поставите линк, водещ до тази котва, на всяко място на същата страница. За целта трябва да използвате таг с необходимия атрибут „href“ със символ # (остър) и описание на ключовата дума на котвата, като това:

Go to Top

Връзки с изображения

В може да се приложи и изображения и други HTML елементи.

Пример

Пример

Още няколко примера за href

This gives a base url for all further urls on the page This is a live link to an external stylesheet

Целевият пример

На уточнява, атрибутите, където да отвори свързания документ в a(котва) маркер.

Примери:

Целевият атрибут със стойността „_blank” отваря свързания документ в нов прозорец или раздел.

 freeCodeCamp

Целевият атрибут със стойността на „_self” отваря свързания документ в същия кадър, в който е щракнат (това е по подразбиране и обикновено не е необходимо да се посочва).

 freeCodeCamp
 freeCodeCamp

Целевият атрибут със стойността на „_parent“ отваря свързания документ в родителския кадър.

 freeCodeCamp

Целевият атрибут със стойността „_top“ отваря свързания документ в цялото тяло на прозореца.

 freeCodeCamp

Целеви атрибут със стойността на „framename“ Отваря свързания документ в посочена именувана рамка.

 freeCodeCamp

Пример за атрибут на основния фон

Ако искате да добавите фоново изображение вместо цвят, едно решение е атрибутът. Той определя фоново изображение за HTML документ.

Синтаксис:

Атрибут:

background - URL for background image

Пример:

атрибутът body-background се амортизира

атрибутът body-background е остарял в HTML5. Правилният начин за стилизиране на маркера е с CSS.

Има няколко CSS свойства, използвани за задаване на фона на елемент. Те могат да се използват за задаване на фона на цяла страница.

Пример за атрибут Body Bgcolor

В атрибута задава цвета на фона за HTML документ.

Синтаксис :

Стойността на цвета може да бъде или име на цвят (като, purple) или шестнадесетична стойност (като, #af0000).

To add a background color to a webpage you can use the attribute. It specifies a color for the HTML document to display.

For example:

  Body bgcolor Attribute example   

This webpage has colored background.

You can change the color by replacing ###### with a hexadecimal value. For simple colors you can also use the word, such as “red” or “black”.

All major browsers support the attribute.

Note:

  • HTML 5 does not support the attribute. Use CSS for this purpose. How? By using the following code: Of course, you can also do it in a separate document instead of an inline method.
  • Do not use RGB value in attribute because rgb() is for CSS only, that is, it will not work in HTML.

The Div Align Attribute Example

The attribute is used for aligning the text in a div tag to The Left, Right, center or justify.

For instance:

   Div Align Attribbute Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Important!

This attribute is no longer supported in html5. css is the way to go.

The Div Align attribute can be used to horizontally align the contents within a div. In the below example, the text will be centered within the div.

 This Text Will Be Centered 

**This attribute is not supported in HTML5 and CSS Text Align should be used instead

The Font Color Attribute Example

This attribute is used to set a color to the text enclosed in a tag.

Important:

This attribute is not supported in HTML5. Instead, this freeCodeCamp article specifies a CSS method, which can be used.

Note:

A color can also be specified using a 'hex code' or an 'rgb code', instead of using a name.

Example:

  1. Color name attribute
  Font color example using color attribute  

Hex code attribute

  Font color example using color attribute  

RGB attribute

  Font color example using color attribute  

The Font Size Attribute Example

This attribute specifies the font size as either a numeric or relative value. Numeric values range from 1 to 7with 1 being the smallest and 3 the default. It can also be defined using a relative value, like +2 or -3, which set it relative to the value of the size attribute of the element, or relative to 3, the default value, if none does exist.

Syntax:

Example:

  This is some text!  

Note : The size attribute of is not supported in HTML5. Use CSS instead.

The Img Align Attribute Example

The align attribute of an image specifies where the image should be aligned according to the surrounding element.

Attribute Values:

right - Align image to the right left - Align image to the left

top - Align image to the top

bottom - Align image to the bottom

middle - Align image to the middle

For example:

   Img Align Attribute   

This is an example. More text right here

We can also align in right if we want:

This is another example

Please note the align attribute is not supported in HTML5, and you should use CSS instead. However, it is still supported by all the major browsers.

The Img Width Attribute

The HTML ‘width’ attribute refers to the width of an image. The value in the quotations is the amount of pixels.

For example, if you already have a link to an image set up via the src attribute you can add the width attribute like so:

   Img Width Attribute   

In the code snippet above there is an image tag and the image is set to a width of 100 pixels. width="100"

The Img Src Attribute Example

The attribute refers to the source of the image you want to display. The img tag will not display an image without the src attribute. However, if you set the source to the location of the image, you can display any image.

There is an image of the freeCodeCamp Logo located at //avatars0.githubusercontent.com/u/9892522?v=4&s=400

You can set that as the image using the src attribute.

  Img Src Attribute Example   

The above code displays like this:

The freeCodeCamp Avatar

The src attribute is supported by all browsers.

You can also have a locally hosted file as your image.

For example, > > Greater-than sign < < < Less-than sign • • • Bullet point

HTML Form Example

Basically, forms are used to collect data entered by a user, which are then sent to the server for further processing. They can be used for different kinds of user inputs, such as name, email etc.

Form contains control elements which are wrapped around tags, like input, which can have types like:

  • text
  • email
  • password
  • checkbox
  • radio
  • submit
  • range
  • search
  • date
  • time
  • week
  • color
  • datalist

Code example:

 Username:  Password:  Male

Female

Other Correct

Other elements that form can contain:

  • textarea - is a multiline box which is most often used for adding some text eg. comment. Size of textarea is defined by number of rows and columns.
  • select - together with tag creates drop-down select menu.
  • button - The button element can be used to define a clickable button.

MORE INFORMATION ON HTML FORMS.

HTML Forms are required when you want to collect some data from the site visitor. For example, during user registration you would like to collect information such as name, email address, credit card, etc.

A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application.

There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.

The HTML tag is used to create an HTML form and it has following syntax −

  form elements like input, textarea etc. 

If the form method is not defined then it will default to “GET”.

The form tag can also have an attribute named “target” which specifies where the link will open. It can open in the browser tab, a frame, or in the current window.

The action attribute defines the action to be performed when the form is submitted. Normally, the form data is sent to a web page at the Script URL when the user clicks on the submit button. If the action attribute is omitted, the action is set to the current page.

HTML5 Audio Example

Before HTML5, audio files had to be played in a browser using a plug-in like Adobe Flash. The HTML

The following code snippet adds an audio file with the filename tutorial.ogg or tutorial.mp3. Theelement indicates alternative audio files which the browser may choose from. The browser will utilize the first recognized format.

Example 1

   Your browser does not support the audio element. 

Example 2

The controls attribute includes audio controls like play, pause, and volume. If you don’t use this attribute, then no controls will be shown.

The element enables you to indicate alternative audio files which the browser may choose from. The browser will utilize the first recognize format. The text between the and tags may be shown in browser that does not support the HTML5 element.

The autoplay attribute will automatically play your audio file in the background. It is considered better practice to let visitors choose to play audio.

The preload attribute indicates what the browser should do if the player is not set to autoplay.

The loop attribute will play your audio file in a continous loop if mentioned

Since this is html5, some browser do not support it. You can check it at //caniuse.com/#search=audio

HTML5 Semantic Elements Example

Semantic HTML elements clearly describe it’s meaning in a human and machine readable way. Elements such as , and are all considered semantic because they accurately describe the purpose of the element and the type of content that is inside them.

A Quick History

HTML was originally created as a markup language to describe documents on the early internet. As the internet grew and was adopted by more people, it’s needs changed. Where the internet was originally inteded for sharing scientific documents, now people wanted to share other things as well. Very quickly, people started wanting to make the web look nicer. Because the web was not initially built to be designed, programmers used different hacks to get things laid out in different ways. Rather than using the

за да опишат информация с помощта на таблица, програмистите биха ги използвали за позициониране на други елементи на страница. С напредването на използването на визуално проектирани оформления програмистите започнаха да използват общ „несемантичен“ маркер като . Те често дават на тези елементи атрибут classили idатрибут, за да опишат тяхната цел. Например, вместо това често се пише като . Тъй като HTML5 все още е сравнително нов, тази употреба на несемантични елементи все още е много разпространена в уебсайтовете днес.

Списък на новите семантични елементи

Семантичните елементи, добавени в HTML5, са:

Elements such as , , , , , and act more or less like elements. They group other elements together into page sections. However where a tag could contain any type of information, it is easy to identify what sort of information would go in a semantic region.

An example of semantic element layout by w3schools

Semantic elements laying out a page by w3schools

Benefits of semantic elements

To look at the benefits of semantic elements, here are two pieces of HTML code. This first block of code uses semantic elements:

Whilst this second block of code uses non-semantic elements:

First, it is much easier to read. This is probably the first thing you will notice when looking at the first block of code using semantic elements. This is a small example, but as a programmer you can be reading through hundreds or thousands of lines of code. The easier it is to read and understand that code, the easier it makes your job.

It has greater accessibility. You are not the only one that finds semantic elements easier to understand. Search engines and assistive technologies (like screen readers for users with a sight impairment) are also able to better understand the context and content of your website, meaning a better experience for your users.

Overall, semantic elements also lead to more consistent code. When creating a header using non-semantic elements, different programmers might write this as , , , or simply . There are so many ways that you can create a header element, and they all depend on the personal preference of the programmer. By creating a standard semantic element, it makes it easier for everyone.

Since October 2014, HTML4 got upgraded to HTML5, along with some new “semantic” elements. To this day, some of us might still be confused as to why so many different elements that doesn’t seem to show any major changes.

and

“What’s the difference?”, you may ask. Both these elements are used for sectioning a content, and yes, they can definitely be used interchangeably. It’s a matter of in which situation. HTML4 offered only one type of container element, which is . While this is still used in HTML5, HTML5 provided us with and in a way to replace .

The and elements are conceptually similar and interchangeable. To decide which of these you should choose, take note of the following:

  1. An article is intended to be independently distributable or reusable.
  2. A section is a thematic grouping of content.

Top Stories

News

Story 1 Story 2 Story 3

Sport

Story 1 Story 2 Story 3

and

The element is generally found at the top of a document, a section, or an article and usually contains the main heading and some navigation and search tools.

Company A

  • Home
  • About
  • Contact us

The element should be used where you want a main heading with one or more subheadings.

Heading 1

Subheading 1

Subheading 2

REMEMBER, that the element can contain any content, but the element can only contain other headers, that is

Original text


to

and including .

The element is intended for content that is not part of the flow of the text in which it appears, however still related in some way. This of as a sidebar to your main content.

This is a sidebar, for example a terminology definition or a short background to a historical figure.

Before HTML5, our menus were created with

    ’s and
  • ’s. Now, together with these, we can separate our menu items with a , for navigation between your pages. You can have any number of elements on a page, for example, its common to have global navigation across the top (in the ) and local navigation in a sidebar (in an element).

    • Home
    • About
    • Contact us

    If there is a there must be a . A is generally found at the bottom of a document, a section, or an article. Just like the the content is generally metainformation, such as author details, legal information, and/or links to related information. It is also valid to include elements within a footer.

    ©Company A

    The element often appears within a or element which would usually contain copyright information or legal disclaimers, and other such fine print. However, this is not intended to make the text smaller. It is just describing its content, not prescribing presentation.

    ©Company A Date

    The element allows an unambiguous ISO 8601 date to be attached to a human-readable version of that date.

    Tuesday, 31 October 2017

    Why bother with ? While humans can read time that can disambiguate through context in the normal way, the computers can read the ISO 8601 date and see the date, time, and the time zone.

    and

    is for wrapping your image content around it, and is to caption your image.

    Shadow of Mordor Cover art for Middle-earth: Shadow of Mordor 

    HTML5 Video Example

    Before HTML5, in order to have a video play in a webpage you would need to use a plugin, like Adobe Flash Player. With the introduction of HTML5, you can now place it directly into the page itself. The HTML

    To embed video file into web page, just add this code snippet and change the src of audio file.

       Your browser does not support the video element. Kindly,update it to latest version. 

    The controls attribute includes video controls, similar to play, pause, and volume.

    This feature is supported by all modern/updated browsers. However, not all support the same video file format. My recommendation for a wide range of compatibilty is MP4, as it is the most widely accepted format. There are also two other formats (WebM and Ogg) that are supported in Chrome, Firefox, and Opera.

    The element enables you to indicate alternative video files which the browser may choose from. The browser will utilize the first recognize format. In HTML5, there are 3 supported video formats: MP4, WebM, and Ogg.

    The text between the  tags will only be displayed in browsers that do not support the

    There are several different elements of the video tag, many of these explanations are based on Mozilla’s web docs (linked below). There are even more if you click the link at the bottom.

    autoplay

    “autoplay” can be set to either true or false. You set it to true by adding it into the tag, if it is not present in the tag it is set to false. If set to true, the video will begin playing as soon as enough of the video has buffered for it to be able to play. Many people find autoplaying videos as disruptive or annoying so use this feature sparingly. Also note, that some mobile browsers, such as Safari for iOS, ignore this attribute.

    poster

    The “poster” attribute is the image that shows on the video until the user clicks to play it.

    controls

    The “controls” attribute can be set to true or false and will handle whether controls such as the play/pause button or volume slider appear. You set it to true by adding it into the tag, if it is not present in the tag it is set to false.

    There are many more attributes that can be added that are optional to customize the videoplayer in the page. To learn more, click on the links below.

    HTML5 Web Storage Example

    Web storage allows web applications to store up to 5MB of information in browser storage per origin (per domain and protocol).

    Types of Web Storage

    There are two objects for storing data on the client:

    window.localStorage: stores data with no expiration date and lives until removed.

    // Store Item localStorage.setItem("foo", "bar"); // Get Item localStorage.getItem("foo"); //returns "bar"

    window.sessionStorage: stores data for one session, where data is lost when the browser / browser tab is closed.

    // Store Item sessionStorage.setItem("foo", "bar"); // Get Item sessionStorage.getItem("foo"); //returns "bar"

    Since the current implementation only supports string-to-string mappings, you need to serialize and de-serialize other data structures.

    You can do so using JSON.stringify() and JSON.parse().

    For e.g. for the given JSON

    var jsonObject = { 'one': 1, 'two': 2, 'three': 3 };

    We first convert the JSON object to string and save in the local storage:

    localStorage.setItem('jsonObjectString', JSON.stringify(jsonObject));

    To get the JSON object from the string stored in local storage:

    var jsonObject = JSON.parse(localStorage.getItem('jsonObjectString'));

    Mailto Links Example

    A mailto link is a kind of hyperlink () with special parameters that lets you specify additional recipients, a subject line, and/or a body text.

    The basic syntax with a recipient is:

    Some text

    More customization!

    Adding a subject to that mail:

    If you want to add a specific subject to that mail, be careful to add %20 or + everywhere there’s a space in the subject line. An easy way to ensure that it is properly formatted is to use a URL Decoder / Encoder.

    Adding body text:

    Similarly, you can add a specific message in the body portion of the email: Again, spaces have to be replaced by %20 or +. After the subject paramater, any additional parameter must be preceded by &

    Example: Say you want users to send an email to their friends about their progress at Free Code Camp:

    Address: empty

    Subject: Great news

    Body: I am becoming a developer

    Your html link now:

    Send mail!

    Here, we’ve left mailto empty (mailto:?). This will open the user’s email client and the user will add the recipient address themselves.

    Adding more recipients:

    In the same manner, you can add CC and bcc parameters. Seperate each address by a comma!

    Additional parameters must be preceded by &.

    Send mail!

    Thank you for using this HTML reference. Happy coding!