Html codes for blog

How TO — Blog Layout

Learn how to create a responsive blog layout with CSS.

Learn how to create a responsive blog layout that varies between two and full-width columns depending on screen width.

Resize the browser window to see the responsive effect:

How To Create a Blog Layout

Step 1) Add HTML:

Example

Blog Name

TITLE HEADING

Title description, Dec 7, 2017

Image

Some text..

TITLE HEADING

Title description, Sep 2, 2017

Image

Some text..

About Me

Image

Some text about me in culpa qui officia deserunt mollit anim..

Popular Post

Follow Me

Some text..

Step 2) Add CSS:

Example

body font-family: Arial;
padding: 20px;
background: #f1f1f1;
>

/* Header/Blog Title */
.header padding: 30px;
font-size: 40px;
text-align: center;
background: white;
>

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn <
float: left;
width: 75%;
>

/* Right column */
.rightcolumn float: left;
width: 25%;
padding-left: 20px;
>

/* Fake image */
.fakeimg background-color: #aaa;
width: 100%;
padding: 20px;
>

/* Add a card effect for articles */
.card background-color: white;
padding: 20px;
margin-top: 20px;
>

/* Clear floats after the columns */
.row:after content: «»;
display: table;
clear: both;
>

/* Footer */
.footer padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
>

/* Responsive layout — when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) .leftcolumn, .rightcolumn <
width: 100%;
padding: 0;
>
>

Tip: Go to our CSS Website Layout Tutorial to learn more about website layouts.

Tip: Go to our CSS Responsive Web Design Tutorial to learn more about responsive web design and grids.

Источник

Top 10 HTML Tags That You Must Use While Posting a Blog Content

Blogging is one of the most interesting a competitive online business. Blogging, however, is not hard but the failure or success of your blog depends on one major condition. Your blog should have an attractive and beautiful design and layout that contributes greatly to the level of interest your visitors gain. To do this, you need HTML.HTML is one of the most powerful and easy-to-learn for web designing & web development process. It is easy in that it does not require you to master the language fully to produce good results.

HTML uses an easy format that guides web browsers, whether on your computer or phone, to read and display webpages for you in a certain format. The main concept behind HTML is to design and include certain elements in your blog, for instance, images, lists, paragraphs, and many more. Below are ten most useful tags that you must ensure to use while preparing your blog post.

Top 10 HTML Tags

A link is a very important element for a blog post. This is true because you get the advantage of referring your readers to another page of your blog, or another blog entirely. In most cases, links are lines highlighted in blue. When clicked, they open a certain URL.

The format has three major parts that you need to understand.

  • The href is the most important part of the tag since it contains the address to which the visitors are directed. This is the mypage.com address in the example above.
  • The title is the description of the link, which is a major requirement for the HTML standards.
  • The anchor text, the final part of the tag, is the part visible to the users. There are two main options for this part of the tag. You can decide to either have a sentence, a single word, or simply have an image that opens the address.

2. Bold and italic tags

Bold and italic tags are the most common form of word formatting. When used, the bold tags provide a bold word or sentence, while the italic tag provides an italic format. These two are very crucial when highlighting important information for your blog fans or visitors. They help put emphasis.

The format for these two tags is very simple to understand.

my example

It is important to recognise that the initial tags for these two in the previous HTML versions were and respectively. These two, however, are no longer in use.

3. Headings

my heading

There are different headings used in documents, from h1 to h6, depending on your content. The headings provide a great way to categorise the content on your blog. This makes it very easy to understand and read. The headings tags are very easy to implement on your blog.

For instance, for h2, you use the tag

The size of the letters keep growing smaller, but remaining unique to differentiate the different topics and subtopics.

4. Paragraphs

Most people do not understand the importance of paragraphs in blogs. It is well known that spaces in content reduce the amount of boredom. More spaces help readers retain their interest in the content. Paragraphs also retain a uniform arrangement of the content and help separate different points availed in the content.

The paragraph tag is somehow unique and different from the other tags. It is also the easiest from all other tags. All you need to do to help the web browser recognize the start of a new paragraph is include

tag. The tag

signals the beginning of a new paragraph.

6. Blockquotes

statement

Blockquotes make it easier to quote a long paragraph on its own while making the content unique. To use blockquotes, you simply need to use the tag. It has a citation tag commonly used together with it. This citation tag is which helps provide a reference to the source of the quote.

The blockquote tag is written as

7. Image””

Images are important for every blog to help explain better. The image tag is written in the following format:

””

  • .

These specifications help define the format and design of the image depending on your preferences related to your blog.

8. Line break

A line break tag, written as , helps you create your own line space definitions. This is important since the host of your blog has settings that define the spaces between your paragraphs, which might conflict with your needs. Using this tag, the browser is able to create simple, small spaces between lines of content.

9. Horizontal line

This helps break the monotony in content and separate different parts of content. The horizontal line is very important for blogs and uses the tag .

10. Code explanation

When explaining code for a blog, you have to write the same tags. You also need the tags to appear in your content as they are written without the web browsers interpreting them as code. To do this, you simply need to use a tag.

Conclusion

A blog is easy to run. However, to get visitors to come again and enjoy their time on your blog, you need to have a beautiful, well-arranged design. The HTML tags above help you achieve this design that helps attract visitors for more. Remember, a HTML tag needs a closing tag as well, written as . Without a closing tag, the browser would not recognise the tag’s function.

Latest Posts

job portal app development

Job Portal App Development: Exploring Its Development Cost and Features

Nowadays, you can have your favorite mobile app development company develop any app to fulfill a specific purpose, all. read more

influencer marketing for apps

The Ultimate Guide to Utilizing Influencer Marketing for Mobile App Promotion

Influencers have a unique combination of qualities that makes them magnets for people. They have all the expertise, authenticity. read more

social media engagement

25 Proven Ways to Increase Your Social Media Engagement Quickly

Social media marketing is just as potent as any other primary type of digital marketing in ensuring successful campaigns. read more

fintech app ideas

15 Innovative Fintech App Ideas Transforming the Industry

It’s clear as a bell that the fintech industry is making far-reaching changes in the financial sector. After all. read more

payment app development

Payment App Development: Explore the Features, Types & Cost Estimation

It’s no wonder that Payment App Development is one of the hottest app development projects in recent years. The. read more

Ads channel diversification

Ad Channel Diversification Strategy To Hack Your Mobile App Growth

The advent of Apple’s App Tracking Transparency (ATT) completely changed the game for advertisers as it disrupted the traditional. read more

voice search optimization

More than half of the US population is starting to prefer voice search. Voice search results also load quicker. read more

Web app are one of the best types of apps for business simply because of their accessibility and versatility. read more

mobile game ui design

10 Best Practices on Mobile Game UI Design that Actual Gamers Love

Gamers are attracted to a game’s aesthetics just as much as its gameplay. That’s just one-half of Mobile Game. read more

Источник

Читайте также:  How to sort list in python
Оцените статью