HTML how to embed a picture using Flask? - html

I am setting up a web app with flask. I try to show remote pictures
Flask replaces {{article["image"]}} with https://gitlab.com/MindReadH/Articles/raw/master/spain.png in the following code:
<html>
<head>
<title>{{article.title}}</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename ='vendor/bootstrap/css/bootstrap.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename ='fonts/font-awesome-4.7.0/css/font-awesome.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename ='css/articleDetail.css')}}"/>
</head>
<body>
<div class="container">
<center><i class="fa fa-arrow-left fa-3x"></i> <i class="fa fa-home fa-3x"></i></center>
<div class="card mb-4">
<div class="card-body">
<h2 class="card-title" align="center">{{ article['title'] }}</h2>
<p align="center" class="card-text">{{ article['abstract']}}</p>
<p align="center" class="card-text">Category : {{ article['category']}}</p>
<p align="center" class="card-text">Article Tags : {{ article['articleTags']}}</p>
<p align="center" class="card-text">Authors : {{ article['authors']}}</p>
<p align="center" class="card-text">Language : {{ article['language']}}</p>
<p align="center" class="card-text">Text : {{ article['text']}}</p>
<img src={{article['text']}} class="inline"/>
<p align="center" class="inline-text">Image : {{ article['image']}}</p>
<img src={{article['image']}} class="inline"/>
<p align="center" class="card-text">Video : {{ article['video']}}</p>
<video controls><source src={{article['video']}}class="inline"/></video>
</div>
<!--<img class="card-img-top" src="http://placehold.it/750x300" alt="Card image cap">-->
</div>
</div>
</body>
</html>
As expected, the first line
<p align="center" class="inline-text">Image : {{ article['image']}}</p
returns
Image : https://gitlab.com/MindReadH/Articles/raw/master/spain.png which is the address of the image
But the image is not loaded with the second line. Firefox log says:
"loading of all possible resources failed"
Edit
as Luis Melo pointed out, i just missed the quotation marks on the src file:
<img src="{{article['image']}}" class="inline"/>


The problem is that you are not using quotation in your html.
Try replacing every src and href like these:
<img src={{article['image']}} class="inline"/>
With parameters with quotation:
<img src="{{article['image']}}" class="inline"/>
You can visualize the solution working here along with the same issue you are facing.

Related

convert figma to html and css

I'm using Figma to design my web page but when I try to convert it into HTML and CSS the text appears without style, although I tried to embed the CSS with HTML or link it with the external file it doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>Desktop - 21</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Almarai%3A300%2C400%2C700"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro%3A300%2C400%2C700"/>
<link rel="stylesheet" href="./styles/desktop-21.css"/>
</head>
<body>
<div class="desktop-21-Su8">
<div class="auto-group-ntce-Q5G">
<div class="auto-group-4ge6-XQn">
<div class="auto-group-bez8-T3Y">
<img class="image-11-NgJ" src="./assets/image-11-4SW.png"/>
<div class="auto-group-jkh4-gwt">
<div class="image-2-pHQ">
</div>
<p class="item--kRx">الدخول</p>
<img class="lock-02-SZg" src="./assets/lock-02-zCr.png"/>
</div>
<p class="item--n7k">المساعدة والدعم</p>
<p class="item--Fn2">الاسئلة المتكررة</p>
<p class="item--YFL">
<span class="item--YFL-sub-0">
تعرف على
<br/>
</span>
<span class="item--YFL-sub-1">حصيف</span>
</p>
<img class="image-10-o4n" src="./assets/image-10-hop.png"/>
</div>
<div class="line-6-7rA">
</div>
<p class="item--rYr">حصيف</p>
</div>
<p class="item--N1Q">الخدمات العدلية الالكترونية</p>
<div class="auto-group-u3mu-E3c">
<img class="chevron-left-vx2" src="./assets/chevron-left-wR4.png"/>
<p class="item--rqg">الدخول</p>
</div>
</div>
<div class="auto-group-nyy8-jea">
<div class="frame-2-fHL">
<p class="item--C2N">حصيف</p>
<p class="item-920072390-79L">920072390</p>
</div>
<p class="item-1444-2020--cbt">جميع الحقوق محفوظة لحصيف ,المملكة العربية السعودية 1444 ه -2020 م</p>
<div class="auto-group-vefu-2fc">
<p class="item--xZG">مواقع التواصل الاجتماعي</p>
<div class="auto-group-wyye-EWn">
<div class="auto-group-m8ae-xhg">
<img class="image-16-usp" src="./assets/image-16-HBY.png"/>
<img class="image-15-3z2" src="./assets/image-15-8pS.png"/>
</div>
<img class="image-14-PY6" src="./assets/image-14-Mjp.png"/>
</div>
</div>
<p class="item--dSS">
<span class="item--dSS-sub-0">
المساعدة والدعم
<br/>
<br/>
</span>
<span class="item--dSS-sub-1">
الاسئلة الشائعة
<br/>
<br/>
دليل المسخدم
<br/>
</span>
</p>
</div>
</div>
</body>
I tried using anima and other plugins in Figma but didn't work for me, function12.io helped me with extracting the code but it appears as a text without style

Try
Builder.io - Figma to HTML, React, and more
TeleportHQ - Figma to Code - Export HTML, CSS, React & Vue

In the Function12, once you export the code, you can check the styles over here.

html not loading multiple images

I am trying to make an image page for a website and only one of the images loads. Anybody have advice?
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="main2.css">
</head>
<body bgcolor="black">
<h1 style="color:white"> Images </h1>
<div class="row">
<div class="column">
<img src="C:\Users\Scott Jackson\Downloads\boat.jpg" alt="C:\Users\Scott Jackson\Downloads\boat.jpg" class="image1" height="250">
</div>
<div class="column">
<img src="‪‪‪C:\Users\Scott Jackson\Downloads\boat.jpg" alt="C:\Users\Scott Jackson\Downloads\boat.jpg" class="image2" height="250">
</div>
</div>```
[1]: https://i.stack.imgur.com/YYky7.png

move your images to the same directory as your HTML files and change your img tag's src to a relative path, i.e. something like <img src="‪‪‪boat.jpg">

Validator giving stray start tag error but I have no script and nothing outside <html> except !DOCTYPE

I'm getting the "Error: Stray start tag script" in the W3 Nu Html Checker. I have no script (because I haven't learned any yet, lol) and I also have nothing outside my <html> tags except for !DOCTYPE.
Here's my code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="https://res.cloudinary.com/amanda-sterling-art/image/upload/v1578777557/AmandaSterling.Art/favicon_dkiz5j.ico" />
<link href="https://fonts.googleapis.com/css?family=Walter+Turncoat&display=swap" rel="stylesheet">
<title>Amanda Sterling Art</title>
</head>
<body>
<div class="flex-container">
<div id="title-box">
<h1>Amanda Sterling Art</h1>
</div>
<div id='link-box'>
<div id="tiles">
<div class="tile"><img class="preview" src="https://res.cloudinary.com/amanda-sterling-art/image/upload/v1581724527/AmandaSterling.Art/IMG_2826_zlbtfj.jpg" alt="Etsy Thumbnail"><p class="preview-caption">Etsy</p></div>
<div class="tile"><img class="preview" src="https://res.cloudinary.com/amanda-sterling-art/image/upload/v1581720260/AmandaSterling.Art/work-43950676-primary_square-u-cotton-tote_hlqyjp_duibu3.jpg" alt="Redbubble Thumbnail"><p class="preview-caption">Redbubble</p></div>
<div class="tile"><img class="preview" src="https://res.cloudinary.com/amanda-sterling-art/image/upload/v1581720281/AmandaSterling.Art/Day_26_-_fotor_qlica5_trfclz.jpg" alt="Art Instagram Thumbnail"><p class="preview-caption">Instagram (art)</p></div>
<div class="tile"><img class="preview" src="https://res.cloudinary.com/amanda-sterling-art/image/upload/v1581722432/AmandaSterling.Art/56276160_313103576022109_2788164958563511652_n.jpg_ylizzi.jpg" alt="Photography Instagram Thumbnail"><p class="preview-caption">Instagram (photography)</p></div>
<div class="tile"><img class="preview" src="https://res.cloudinary.com/amanda-sterling-art/image/upload/v1581723362/AmandaSterling.Art/twitter_kibija.png" alt="Twitter Thumbnail"><p class="preview-caption">Twitter</p></div>
<div class="tile"><img class="preview" src="https://res.cloudinary.com/amanda-sterling-art/image/upload/v1581724021/AmandaSterling.Art/pinterest_ep4uha.png" alt="Pinterest Thumbnail"><p class="preview-caption">Pinterest</p></div>
<div class="tile"><img class="preview" src="https://res.cloudinary.com/amanda-sterling-art/image/upload/v1581725266/AmandaSterling.Art/IMG_0310_Fotor_half_e79jn7.jpg" alt="Contact Thumbnail"><p class="preview-caption">Contact</p></div>
<!-- end of tiles -->
</div> <!--end of link box-->
</div>
<footer><small>© Amanda Sterling Fink 2020</small></footer>
</div> <!-- flex-container -->
</body>
</html>

When your checking source codes for errors you should always check that there is not stuff being prepended or appended to your file. if there is change hosting providers there are loads that offer free hosting without in-page advertisements use one of them. https://www.free-webhosts.com/ (you want one without forced adds)
You should also always go to the page in the browser and view the source of the page from the server, not the code you have written to check for appended or prepended content to do this go to the page in your browser and (right-click, view source)

Java - Thymeleaf - HTML: Linebreak <br/> does not work?

I am using IntelliJ and Spring Boot and Thymeleaf for a database visualisation project. The following HTML-Template is for the view of one gene:
gene.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
<title>Gene</title>
<meta http-equiv="Content-Type" content="content/html; charset=UTF-8">
<link rel="stylesheet" href="main.css" />
</head>
<body>
<!--import header-->
<header th:include="header"></header>
<div id="main">
<!--GeneID as page heading -->
<h2 th:text="'Gene: '+${identifier}" style="text-align: center"></h2>
<!--Gene description -->
<p th:text="${description}" style="text-align: center"></p>
<br/>
<!-- Sequence -->
<h3 th:text="'Sequence:'"></h3>
<!-- For each char in sequence-->
<th:block th:each="char:${sequence}">
<!-- Print the char. Color encoding done by main.css -->
<div th:class="${'gene ' + char}" th:text="${char}"></div>
</th:block>
<!--Protein encoded by gene -->
<h3 th:text="'Protein:'"></h3>
<a th:href="${'protein?id='+protein}" th:text="${protein}"></a>
</div>
</body>
</html>
In my later view, I have a problem.
I want the "Protein: Q6GZX4" to be in one line below the sequence. Yet I could not achieve it with <br/>or anything else.
What am I missing?
Thanks for your time and effort :)

Based on #manfromnowhere:
Change gene.html to:
[...]
<!--Protein encoded by gene -->
<div class="breaker">
<br/>
<h3 style="display:inline-block;" th:text="'Protein:'"></h3>
<a th:href="${'protein?id='+protein}" th:text="${protein}"></a>
</div>
breaker-class in main.css:
div.breaker{
clear:both;
}
Output:

I get rid of class in CSS and my paragraph element wont work...WHY?

Im using Django web framework for my first project, trying to adjust my fonts. However, after various trial and error I was able to get a new font to render on my page. The problem is that when I get ride of my .font class, the p { } element no longer works for whatever reason and the font remains unchanged. I can't get my font to change any other way... I have NO idea why this is happening, driving me crazy...
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="{% static 'personal/css/bootstrap.min.css' %}" type = "text/css"/>
<link rel="stylesheet" href="{% static 'personal/css/custom2.css' %}" type = "text/css"/>
<link href="https://fonts.googleapis.com/css?family=Sansita" rel="stylesheet">
</head>
<!-- header table, no text displayed -->
<Br>
<Br>
<table align='center' width='75%' border= '0px'>
<tr>
<td bgcolor='transparent'>
</td>
</tr>
s
</table>
<!-- main body -->
<body background = "{% static 'personal/img/background.jpg' %}">
<table align='center' width='75%' border='1px'>
<tr>
<td bgcolor='white'>
<div class="body" style="min-height:95%; ">
<div class="row">
<div class="col-sm-2">
<br>
<center>
<img src="{% static 'personal/img/profile.jpg' %}" class="responsive-img" style='max-height:100px;' alt="face">
</center>
</div>
<div class="col-sm-10">
<br>
<p>test paragraph</p>
</div>
</div>
<!-- navigation bar -->
<nav class="navbar navbar-inverse" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"></a>
</div>
<ul class="nav navbar-nav">
<li><a href='/header/'>HQ</a></li>
<!--<li><a href='/blog/'>Blog</a></li>-->
<li><a href='/bucket/'>TO DO</a></li>
<li><a href='/influencers/'>TO MEET</a></li>
<li><a href='/contact/'>TO CONTACT</a></li>
<li><a href='https://www.linkedin.com/in/pete-humiston-30255a5b' target='_blank'>LinkedIn</a></li>
</ul>
</div>
</nav>
{% block content %}
{% endblock %}
<footer>
<!-- This is a footer I'll leave for later. Overkill.
<div class="container-fluid" style='margin-left:15px'>
<p>Contact | LinkedIn | Twitter | Google+</p>
-->
</div>
</footer>
</td>
</tr>
</table>
</body>
</html>
Custom2.css
<style>
#import url('https://fonts.googleapis.com/css?family=Sansita');
</style>
.font {
font-family: 'Sansita', sans-serif;
}
p {
font-family: 'Sansita', sans-serif;
}

An external css file (Custom2.css) does not need <style> tags - just put straight CSS in it. The presence of those tags will break the next CSS rule. So if you have those tags in your CSS file, and you remove .font, then p won't be read since it will now come after those tags.
The contents should be...
#import url('https://fonts.googleapis.com/css?family=Sansita');
.font {
font-family: 'Sansita', sans-serif;
}
p {
font-family: 'Sansita', sans-serif;
}