Главная » Языки программирования

Mr. Camel

Содержание
  1. How TO — Create and View a Website
  2. Step 1: Open Notepad (PC)
  3. Step 1: Open TextEdit (Mac)
  4. Step 2: Write Some HTML
  5. My First Heading
  6. Step 3: Save the HTML Page
  7. Step 4: View the HTML Page in Your Browser
  8. W3Schools Online Editor — «Try it Yourself»
  9. Example
  10. This is a Heading
  11. HTML iFrame
  12. What is iframe
  13. Example
  14. Setting Width and Height of an iFrame
  15. Example
  16. Example
  17. Removing Default Frameborder
  18. Example
  19. Example
  20. Using an iFrame as Link Target
  21. HTML Web Page Examples with Source Code
  22. HTML Web Page Example 1
  23. HTML WebPage Example 2
  24. HTML Code Example 3 (Offer Page)
  25. HTML Code Example 4
  26. Conclusion

How TO — Create and View a Website

Learn how to create and view a web page on your computer.

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.

Step 2: Write Some HTML

Write or copy the following HTML code into Notepad:

My First Heading

Notepad

Step 3: Save the HTML Page

Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file «index.htm» and set the encoding to UTF-8 (which is the preferred encoding for HTML files).

View in Browser

Tip: You can use either .htm or .html as file extension. There is no difference; it is up to you.

Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file, or right-click — and choose «Open with»).

The result will look much like this:

View in Browser

W3Schools Online Editor — «Try it Yourself»

With our free online editor, you can edit the HTML code and view the result in your browser.

It is the perfect tool when you want to test code fast. It also has color coding and the ability to save and share code with others:

Example

This is a Heading

This is a paragraph.

Click on the «Try it Yourself» button to see how it works.

Источник

HTML iFrame

In this tutorial you will learn how to use an iframe to display a web page within another web page.

What is iframe

An iframe or inline frame is used to display external objects including other web pages within a web page. An iframe pretty much acts like a mini web browser within a web browser. Also, the content inside an iframe exists entirely independent from the surrounding elements.

The basic syntax for adding an iframe to a web page can be given with:

The URL specified in the src attribute points to the location of an external object or a web page.

The following example display «hello.html» file inside an iframe in current document.

Example

Setting Width and Height of an iFrame

The height and width attributes are used to specify the height and width of the iframe.

Example

You can also use CSS to set the width and height of an iframe, as shown here:

Example

Please see the tutorial on HTML styles to learn the methods of applying CSS to HTML elements.

Note: The width and height attribute values are specified in pixels by default, but you can also set these values in percentage, such as 50%, 100% and so on. The default width of an iframe is 300 pixels, whereas the default height is 150 pixels.

Removing Default Frameborder

The iframe has a border around it by default. However, if you want to modify or remove the iframe borders, the best way is to use the CSS border property.

The following example will simply render the iframe without any borders.

Example

Similarly, you can use the border property to add the borders of your choice to an iframe. The following example will render the iframe with 2 pixels blue border.

Example

An iframe can also be used as a target for the hyperlinks.

An iframe can be named using the name attribute. This implies that when a link with a target attribute with that name as value is clicked, the linked resource will open in that iframe.

Let’s try out an example to understand how it basically works:

Источник

HTML Web Page Examples with Source Code

In this article, we are going to see some HTML web page examples with source code. We will also see some of the key points to learn how to create these web pages.

HTML Web Page Example 1

This is an example of a simple HTML web page that shows the profile of a professional camel.

Here is how the camel profile is designed in HTML:

  1. Container — The complete HTML web page is wrapped in a container. The container is a div element with the class container .
  2. Header — Inside the container, we have a header element that contains the logo and the navigation menu.
  3. Aside — Aside contains the profile picture and other navigational links.
  4. Main — The main element contains the profile information. Like the name, the career, the skills, the contact form, etc.
  5. Footer — The footer contains copyright information.

Here is the complete code of the camel profile:

@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap'); body < margin: 0; box-sizing: border-box; >.container < line-height: 150%; >.header < display: flex; justify-content: space-between; align-items: center; padding: 15px; background-color: #e9e9e9; >.header h1 < color: #222222; font-size: 30px; font-family: 'Pacifico', cursive; >.header .social a < padding: 0 5px; color: #222222; >.left < float: left; width: 180px; margin: 0; padding: 1em; >.content < margin-left: 190px; border-left: 1px solid #d4d4d4; padding: 1em; overflow: hidden; >ul < list-style-type: none; margin: 0; padding: 0; font-family: sans-serif; >li a < display: block; color: #000; padding: 8px 16px; text-decoration: none; >li a.active < background-color: #84e4e2; color: white; >li a:hover:not(.active) < background-color: #29292a; color: white; >table < font-family: arial, sans-serif; border-collapse: collapse; width: 100%; margin: 30px 0; >td, th < border: 1px solid #dddddd; padding: 8px; >tr:nth-child(1) < background-color: #84e4e2; color: white; >tr td i.fas < display: block; font-size: 35px; text-align: center; >.footer
Mr. Camel
About Me
I don't look like some handsome horse, but I am a real desert king. I can survive days without water.
My Career
I work as a web developer for a company that makes websites for camel businesses.

How Can I Help You?
SKILL 1SKILL 2SKILL 3Cleaning kaktus in your backyardStoring some fat for youTaking you through the desertEmail: 
Mobile:

Here is the result of the code above:

HTML web page example 1

HTML WebPage Example 2

This is the second example of an HTML web page. This is a simple error 404 page which is shown when the user tries to access a page that does not exist.

This is a very simple webpage that shows the error 404 page on the screen and gives a link to return to the homepage.

To design an error 404 page you need to use the following steps:

  1. Create a div element that covers the whole page set height: 100vh .
  2. Give it a background image that suits the 404 error.
  3. Style your basic text and link elements with CSS.
   body < margin: 0; box-sizing: border-box; >.container < height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; background: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, .1)), url('https://images.unsplash.com/photo-1595624871930-6e8537998592?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=871&q=80'); background-size: cover; background-position: center; background-repeat: no-repeat; >h1 < font-size: 10rem; color: #fff; text-transform: uppercase; font-weight: 700; margin-bottom: 1rem; >h2 < font-size: 2rem; color: #fff; text-transform: uppercase; font-weight: 700; margin-bottom: 1rem; >p < font-size: 1.5rem; color: #fff; font-weight: 700; margin-bottom: 1rem; >a 
404 
Page not found
 
The page you are looking for does not exist.
 
Visit Homepage

Here is the result of the code in example 2.

HTML web page example 2

HTML Code Example 3 (Offer Page)

In this HTML code example we will create offer page. This is a simple newsletter signup page.

Here is the list of steps to create a newsletter signup page:

  1. First, we need to create the HTML structure of the page. We will use the tag to wrap the content of the page. Then, we will create two sections: one for the intro and one for the sign-up form.
  2. Next, we will style the page using CSS. We will use the display: flex property to align the content of the page. We will also use the min-height property to make sure that the page is always fully visible.
  3. Then, we will style the intro section.
  4. Next, we will style the sign-up section.
  5. Finally, we will style the form. Look at the complete code below to see how we did it.
      
 
Get up to 50% off on all our products and services. Hurry up, the offer ends in 24 hours.
 
 
! 
 
! 
 
! 
 
! 
 
Terms and Services

Here is the result of the code in example 3.

HTML web page example 3

HTML Code Example 4

In the fourth example, we are going to create a testimonial page that shows the reviews of the customers along with their profile pictures, name and designation.

The basic idea will be to create HTML section first and then styling it with CSS.

The reviews and all its details will be stored in an array and then we will loop through the array to display the reviews.

Here is the complete code for the testimonial page.

Complete HTML code for the testimonial page

     
Our Reviews

Here is the output of the above HTML code for testimonials:

Conclusion

This brief guide includes HTML web page examples with source code. We have learned how to create a basic HTML web page with 2 different examples. We have also learned how to create a basic CSS style sheet and how to use it on our HTML web page.

If you want a detailed explanation of a portfolio site then visit the HTML code for homepage.

Источник

Читайте также:  Отличие define от const php
Оцените статью