The Most Common HTML Tags

Link Tag

<a>

The <a>, or anchor, tag lets you create links. A simple link looks like this:

Run

<a href="https://www.muo.com">Go to Site</a>

Video In Document

<video>

The HTML <video> element is used to show a video on a web page. The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format. The controls attribute adds video controls like play, pause and volume.

Run

<video src="yourvideo.mp4" controls />

Break Tag

<br>

The line break tag inserts a single line break:

Run

<p>The first line.<br>The second line.</p>

The first line.
The second line.

Titles Tag

<h1>

The <a> tag defines a level-one header on your page. This will usually be the title, and there will ideally only be one on each page.

<h2> defines level-two headers such as section headers, <h3> level-three sub-headers, and so on, down to <h6>. As an example, the names of the tags in this article are level-two headers.

Run

<h1>Big and Important Header.</h1>

<h2>Slightly Less Big Header</h2>

<h6>Sub-Header</h6>

Big and Important Header

Slightly Less Big Header

Sub-Header

Make an Italic Text

<i>

This tag defines important text. In general, that means it will be italic. However, it's possible to use CSS to make <i> text display differently.

Run

<i>An emphasized line.</i>

An emphasized line

Img in Document

<img>

If you want to embed an image in your page, you'll need to use the image tag. You'll normally use it in conjunction with the "src" attribute. This specifies the source of the image, like this:

Run

<img src="wp-content/uploads/sun-birds.jpg">

Paragraph Tag

<p>

The paragraph tag starts a new paragraph. This usually inserts two line breaks.

Look, for example, at the break between the previous line and this one. That's what a <p> tag will do

Run

<p>Your first paragraph.</p>
<p>Your second paragraph.</p>

Your first paragraph.

Your second Paragraph.

Style Part of Text

<span>

The <a> tag is an inline container used to mark up a part of a text, or a part of a document.

Run

My Mother has <span style="color:blue">blue</span>eyes

My mother has blue eyes.

Unordered List

<ul>

The unordered list is much simpler than its ordered counterpart. It's simply a bulleted list.

Run

<ul>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ul>

First item

Second item

Third item

Ordered List

<ol>

The ordered list tag lets you create an ordered list. In general, that means you'll get a numbered list. Each item in the list needs a list item tag (<li>), so your list will look like this:

Run

<ol>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ol>

1. First item

2. Second item

3. Third item

While it is easy to select and share your pictures on social media, an Instagram portfolio won't hold up in the long run. We can't deny that a well-optimised profile gets attention, but getting clients and proving your professional ability needs much more than a social media portfolio.

So, here are three reasons why every photographer needs a website,

Undivided attention - Unlike social media, a website solely belongs to you and it only has your content on it. So, the visitors and potential clients can give their undivided attention to your work without anyone competing for it.

Credibility - A website for your photography business instantly makes you look professional over your competitors. Over time, a website increases the credibility of your business and thus increases the revenue in the long run.

Extra income - Photography websites or any type of website for that matter can be used as a source of extra income apart from your business. On a photography website, you can start with writing photography blogs, and even roll out ads.

Another option is to sell your photographs for print or for stock companies. This way, you can make that extra passive income while you work on your business. With that said, let's get to business!

How to Create a Photography Website with WordPress

By the end of this article, you will be able to create a Photography website with WordPress like this in 4 simple steps.

The very first step in creating a photography website, or any type of website for that matter, is to get the domain and hosting. A domain is the name of your website that people use to access your website, and hosting is where your website's files are stored. And choosing the right domain for your website improves credibility and builds brand value over time.

But, How to choose a Domain name?

Having a unique and memorable domain name shows that you are a professional and you mean business. Here is how you can choose the right domain name,

Make it Short & Simple - Make sure to have a short and unique domain name so that it becomes memorable in the long run.

Use popular domain extensions - It is recommended to stick with the popular domain extensions, in the likes of .com, .org, or even .net.

Be prepared with alternatives - The domain name you wish for may not always be available. So, it is wise to be prepared with some other domain name options.

The Most Common CSS Styles

Margin

margin-top

The margin-top CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

Run

margin-top: 20px;

margin-right: 20px;

margin-bottom: 20px;

margin-left: 20px;

Padding

padding-top

The padding-top CSS property sets the height of the padding area on the top of an element.

Run

padding-top: 20px;

padding-right: 20px;

padding-bottom: 20px;

padding-left: 20px;

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the printer took a galley of type and scrambled took a galley of type and scrambled it to make a type specimen book.

Text Align

text-align

The text-align CSS property sets the horizontal alignment of the content inside a block element or table-cell box. This means it works like vertical-align but in the horizontal direction.

Run

text-align:left;

text-align:center;

text-align:right;

text-align:justify;

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the printer took a a galley of type and scrambled it to make a type specimen book.

Font Size

font-size

The font-size CSS property sets the size of the font. Changing the font size also updates the sizes of the font size-relative units, such as em, ex, and so forth.

Run

font-size:15px;

font-size:1.4em;

font-size:smaller;

font-size:x-small;

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the printer took a a galley of type and scrambled it to make a type specimen book.

Background Color

background-color

The background-color CSS property sets the background color of an element.

Run

background-color: red;

background-color: #ff7d7d;

background-color: rgb(285, 263, 138);

background-color: rgba(285, 263, 138, .5);

Color

color

The color CSS property sets the foreground color value of an element's text and text decorations, and sets the value. currentcolor may be used as an indirect value on other properties and is the default for other color properties, such as border-color.

Run

color: brown;

color: #6a3254;

color: rgb(214, 122, 127);

color: rgb(214, 122, 127, .5);

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the printer took a a galley of type and scrambled it to make a type specimen book.

Width

width

The width CSS property sets an element's width. By default, it sets the width of the content area, but if box-sizing is set to border-box, it sets the width of the border area.

Run

width: 150px;

width: 10em;

width: 75%;

width: auto;

Line Height

line-height

The width CSS property sets an element's width. By default, it sets the width of the content area, but if box-sizing is set to border-box, it sets the width of the border area.

Run

line-height: normal;

line-height: 2.5;

line-height: 3em;

line-height: 150%;

line-height: 32px;

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the it to make a type specimen book.

Inline Elements in HTML

(Centering Not Supported)

Link Tag

<a>

Image Tag

<img>

Video Tag

<video>

Bold Tag

<b>

Break Tag

<br>

Italic Tag

<i>

Span Tag

<span>

Button Tag

<button>

Emphasis Tag

<em>

Block Level Elements in HTML

(Centering Supported)

Division Tag

<div>

Heading Tag

<h1>...<h6>

Paragraph Tag

<p>

Horizontal Rule Tag

<hr>

Unordered Tag

<ul>

Ordered Tag

<ol>

List Tag

<li>