Created Your First Website Content Page

Once you have a thought for the sort of site page you need to manufacture, you’ll have to begin thinking of some HTML and CSS.

HTML is a markup dialect that was made exclusively to make site pages. The thought is that, at their center, website pages are only a pack of content and pictures organized on the screen in various ways, and markup is only an approach to append guidelines for how to influence those content and pictures to show up.

raykonline website content page

It would seem that there’s a great deal going on, however in the event that we take away all the visual designing, it will resemble this:

Presently there’s significantly less going on. The main distinction between the two is that to produce the screenshot in the second picture, we erased all the CSS code and left only the HTML code set up HTML code that looks a ton like this:

<body>
<nav>
<li>Paths</li>
<li>Courses</li>
<li>Screencasts</li>
</nav>
<main>
<section>
<img src="html-css-badge.png" />
<h2>HTML/CSS 12 courses</h2>
<p>Learn the fundamentals of design, front-end development...</p>
</section>
<section>
<img src="javascript-badge.png" />
<h2>JavaScript 17 courses</h2>
<p>Spend some time with this powerful scripting language and learn...</p>
</section>
</main>
</body>

The words “Paths,” “Courses,” and “Screencasts” are just text, but by putting them inside of those <nav> and <li> tags, the web browser knows to display them as a bulleted list. The <img> tag is used to load an image — in this case, the circular badge icon that represents that learning Path. <h2> stands for “heading 2” — you can think of heading tags as outlining the main sections of a page. Finally, <p> is short for “paragraph,” and any time you need to show some simple text on a web page, it will likely be in a <p> tag.

The <main> and <section> tags are just a way to group that content at an even higher level. For example, each <img>, <h2>, and <p> tag is wrapped in a <section> tag to show that those three are all related information. Each of those sections is a part of the main area of the page, so that gets wrapped in a <main> tag. There are over 100 specific HTML tags that all have a different purpose, and at least knowing how to find the right tag that fits your specific need is an important part of being a web developer.

Which Browser Should I Use?

The web program knows how to take each one of those labels and the substance inside them and show them as a website page. In any case, if all programs have the capacity to show pages, at that point why isn’t there only one rather than different? All things considered, every program actualizes the rendering of HTML and CSS a little in an unexpected way.

This is really a wellspring of much worry for web engineers — they have no real way to control which web program a client will encounter their webpage with, so they invest a great deal of energy tweaking CSS to guarantee it shows similarly as close as conceivable over every single distinctive program.

Styling the Page

While HTML is a markup dialect utilized for orchestrating content on a page, CSS is a different dialect for changing the style of how those labels are shown. We began this article by evacuating all the CSS, so how about we take a gander at how we can include CSS back in.

It’s a best practice to store your CSS code in a different record from your HTML code and after that connect to it from your HTML. For instance, in the event that you have a CSS document named main.css in an indistinguishable organizer from a HTML record named index.html, you’d connection to it from the <head> of the list record, this way:

<head>
<link rel="stylesheet" href="main.css"></link>
</head>

At that point, in main.css, you can compose CSS decides that change the way HTML labels show up in a program. Keep in mind how our segments initially looked like boxes with a picture and content in them, yet when we took away the CSS document, those containers vanished? We could include them back in like this:

section {
  display: inline-block;
  border-radius: 4px;
  max-width: 400px;
  border: 1px solid lightgray;
}

This CSS is choosing the greater part of the area labels and applying four properties to those labels.

Shouldn’t something be said about the route menu? We need those Paths/Courses/Screencasts connects to show up from left to ideal rather than stacked through and through, and we could achieve that like this:

nav {
  list-style-type: none;
}
nav li {
  display: inline;
}

This CSS expels the visual cues from each of the three things in the rundown, and after that the show: inline govern advises those rundown things to show left to right.

Like HTML labels, there are many CSS properties and a couple of dozen diverse approaches to choose which HTML labels to apply those standards to, and keeping in mind that a web designer doesn’t really need to remember every one of those properties, they do should be comfortable with how to examine the ones they need and set them in motion.

Leave a Reply

Your email address will not be published. Required fields are marked *

*