Skip to main content

4. HTML Paragraphs

HTML Paragraphs Overview


We already had an introduction about HTML Paragraphs. This lesson will just give us an overview of paragraphs and we'll get a little bit more into details about how paragraphs work.

A paragraph element is defined as follows;
<p>content</p>

HTML Paragraph Exercises;

Imagine the following scenario
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pharetra urna nec porta porttitor. Integer
lobortis mattis iaculis. Suspendisse nec fringilla ex. Curabitur urna erat, ullamcorper non nisl ac, varius egestas
tortor. Donec in orci

sapien. Proin interdum libero risus, nec ornare eros mattis nec. Quisque sed tristique est, nec molestie 
diam. Fusce in velit vel turpis faucibus accumsan nec non neque. Curabitur ac consequat diam. Donec et mauris
quis est lobortis feugiat

quis nec leo. Integer vulputate, mauris molestie lobortis posuere, augue nunc vestibulum mauris, nec
vehicula quam enim nec mi. Pellentesque pretium volutpat dolor nec tempus. Proin imperdiet velit ut nisl 
egestas egestas. Fusce at lorem efficitur,

eleifend diam et, maximus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>

The content will not be displayed in the same order as we have it outlined above in code. To be able to display it like that, we'd need to use line break element or <br>. Also please note that even if you place a lot of spaces between the words the web browser will still remove these extra spaces automatically.

HTML Paragraph

HTML Elements - Nested elements


Another thing to keep in mind is nesting of elements like in the example.
<p><img src="http://website.com/assets/images/image-1400x933-23.jpg" alt="website.com" width="204" 
height="142">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pharetra urna nec porta porttitor. Integer

<br>lobortis mattis iaculis. Suspendisse nec fringilla ex. Curabitur urna erat, ullamcorper non nisl ac, varius egestas tortor. Donec in orci

<br> sapien. Proin interdum libero risus, nec ornare eros mattis nec. Quisque sed tristique est, nec molestie diam. Fusce in velit vel turpis 
faucibus accumsan nec non neque. Curabitur ac consequat diam. Donec et mauris quis est lobortis feugiat

<br> quis nec leo. Integer vulputate, mauris molestie lobortis posuere, augue nunc vestibulum mauris, nec <br>vehicula quam enim nec 
mi. Pellentesque pretium volutpat dolor nec tempus. Proin imperdiet velit ut nisl <br>egestas egestas. Fusce

at lorem efficitur,<br> eleifend diam et, maximus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>

If you notice here we have a main element paragraph <p> then we have embedded the image <img> element then the line break <br> element. This is a powerful feature and later on we'll be taking advantage of it.

Nested HTML Elements

Pre-defined content <pre>


Imagine that we have a paragraph as follows.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pharetra urna
nec porta porttitor. Integer lobortis mattis iaculis. Suspendisse nec fringilla ex. 
Curabitur urna erat, ullamcorper non nisl ac, varius egestas tortor. Donec in orci</p>

Take a look at the many spaces that we have kept between the words of the content. If we run it as a paragraph then the web browser will eliminate the extra spaces and will keep only one space between the words.

If we want to keep the extra spacing in the subject format then we'd need to use another HTML element or the <pre> element.
 Example" ><pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pharetra urna 
nec porta porttitor. Integer lobortis mattis iaculis. Suspendisse nec fringilla ex. 
Curabitur urna erat, ullamcorper non nisl ac, varius egestas tortor. Donec in orci</pre>

Pre-defined content <pre>

Take a look at this point. We have kept the extra spacing and format of the text by using the <pre> element. You can run the HTML Paragraphs.html file for that purpose

Comments

Post a Comment

Popular posts from this blog

Data Science, Deep Learning, & Machine Learning with Python

Deep Learning, Data Science, & Machine Learning with Python Go hands-on with the latest neural network, artificial intelligence,deep learning and data science techniques employers are seeking! What Will I Learn? Develop using iPython notebooks Understand statistical measures such as standard deviation Visualize data distributions, probability mass functions, and probability density functions Visualize data with matplotlib Use covariance and correlation metrics Apply conditional probability for finding correlated features Use Bayes' Theorem to identify false positives Make predictions using linear regression, polynomial regression, and multivariate regression Understand complex multi-level models Use train/test and K-Fold cross validation to choose the right model Build a spam classifier using Naive Bayes Use decision trees to predict hiring decisions Cluster data using K-Means clustering and Support Vector Machines (SVM) Build a movie r...
1 comment
Read more

Oracle DBA 11g/12c - Database Administration for Junior DBA

Oracle DBA 11g/12c - Database Administration for Junior DBA Learn to become an Oracle Database Administrator (DBA) in 6 weeks and get a well paid job as a Junior DBA What Will I Learn? Final Goal: Get a job as an Oracle Database Administrator (Oracle DBA) As a Oracle Database Administrator (Oracle DBA), you would be able understand the Database Architecture, which will help you to perform your DBA duties with better understanding. As a Oracle Database Administrator (Oracle DBA), you would be able to Install the necessary Oracle Software/Database As a Oracle Database Administrator (Oracle DBA), you would be able to Administer User accounts in the Database As a Oracle Database Administrator (Oracle DBA), you would be able to Manage Tablespace's to provide required space for the data As a Oracle Database Administrator (Oracle DBA), you would be able perform Backup and Recovery as needed. As a Oracle Database Administrator (Oracle DBA), you would be able to diagnose ...
1 comment
Read more

Bootstrap 4 From Scratch With 5 Projects

Bootstrap 4 From Scratch With 5 Projects Master the latest version of Bootstrap (4.0.0 Beta) and build 5 real world themes while learning HTML5 semantics & CSS3 What Will I Learn? Learn and create amazing high quality Bootstrap 4 themes and UIs from scratch Learn the Bootstrap 4 utilities, classes, components & JS widgets using a custom sandbox environment Create a professional workflow & dev server to build from source and compile Sass Requirements You should have basic knowledge of HTML & CSS You do NOT need to know any Bootstrap 3 Description This course will literally take you from knowing nothing about Bootstrap 3 or 4 to learning all of the utilities, components, widgets and grids and building real world themes and websites. You do NOT need to know Bootstrap 3 for this course. Even if you already know Bootstrap 4, skip the learning sections and head right for section 6 to create the custom workflow and start the projec...
Post a Comment
Read more