I created a user's github page.
Now, suppose I have an Image file at the root of the repo located as Images/Emoticons/Cool.png
I try to insert that image in my main Index.html file.
I write -
- <img src="\images\emoticons\cool.png"> and nothing shows up online and offline
- <img src="images\emoticons\cool.png"> and nothing shows up online but I can see the image offline
- <img src="..\images\emoticons\cool.png"> and nothing shows up online and offline
What should be done?
As the site is being served by Linux servers, the path is case sensitive.
In order to make this work, replace emoticons with Emoticons in the provided url.
Also, in a URL, replace the backslash (\) by a forward slash (/).
The following HTML code should properly display the image
<img src="images/Emoticons/cool.png" alt="hi" class="inline"/>
try this
<img src="images/emoticons/cool.png" alt="hi" class="inline"/>
Full Page
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="description" content="Home Page : My Github Web" />
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
<title>Home Page</title>
</head>
<body>
<!-- HEADER -->
<div id="header_wrap" class="outer">
<header class="inner">
<a id="forkme_banner" href="https://github.com/Avi-Aryan">View on GitHub</a>
<h1 id="project_title">Home Page</h1>
<h2 id="project_tagline">Avi Aryan</h2>
</header>
</div>
<!-- MAIN CONTENT -->
<div id="main_content_wrap" class="outer">
<section id="main_content" class="inner">
<br />
Hi ! <img src="images/emoticons/cool.png" alt="hi" class="inline"/><br /><br />
I am a young coder currently having school time in India.<br />
I love intelligent-coding, algorithms and logics and<br />
enjoy playing Cricket and Badminton.<br />
<br />
My coding abilities are currently limited Autohotkey and only Autohotkey.<br />
A listing of my Autohotkey works can be found here.<br />
<br />
You can always visit my blog if you are looking for cool tricks and cracks.<br />
I write original , hard to find content.<br />
<br />
<hr><br />
<h3>My Github Project List</h3>
<ul>
<li>Clipjump
<li>Sublime 4 Autohotkey
<li>Sublime Text Autohotkey Package
</ul><br />
<h3>Other Links</h3>
<ul>
<li>Autohotkey Scripts Listing
<li>Blog Index
</ul>
<br /><br />
</section>
</div>
<!-- FOOTER -->
<div id="footer_wrap" class="outer">
<footer class="inner">
<h2><font color="#FFFFFF">Profiles</font></h2>
<p>
Github<br />
Autohotkey Forum<br />
Google +<br />
Blog
</p>
</footer>
</body>
</html>
Related
I am trying to ge rid of the white space as seen on the picture. I am using bootstrap for my project and I'm fairly new to it. My teacher told me (without looking at any line of code) that it probably is some container that is making this issue but I beg to differ, since the html container is the one NOT taking up the entire screen, it feels to me that theres something going on with that element but I have no css for the HTML element, therefore it must be something with bootstrap? Can anyone help me figure out what the issue is? screenshot where the html is marked and you can see the white box on the right side
.page-break {
background-color: rgb(211, 211, 211);
}
.hero-image {
background-image: url("images/welcome-img.jpg");
background-size: cover;
}
.hero-text {
text-align: center;
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
<script
src="https://kit.fontawesome.com/4db53af2d4.js"
crossorigin="anonymous"
></script>
</head>
<body>
<header>
<section class="top-bar">
<div class="row sticky-top">
<img src="images/tux.png" alt="" class="col-2" />
<h2 class="col-5">About Linux</h2>
<div class="col-5 hamburger-menu">MENU</div>
</div>
</section>
</header>
<main>
<div class="hero-image row">
<div class="hero-text">
<h1>FOSS</h1>
<p>And why it's good for you</p>
</div>
</div>
<!-- <section class="hero-section">
<div class="hero-container">
<img src="images/welcome-img.jpg" alt="" />
<h1>FOSS</h1>
<h3>And why it's good for you</h3>
</div>
</section>-->
<section class="articles container">
<article class="manjaro-article">
<div class="container gx-4 mt-4">
<div class="row">
<img src="images/manjaro_scrn.png" alt="" />
</div>
<div class="row py-3">
<img src="logos/manjaro.svg" alt="" class="col-3 pe-4" />
<h2 class="col-9"><b>Manjaro</b></h2>
</div>
<div class="row">
<p>
Is an accessible, friendly, open-source operating system.
Providing all the benefits of cutting-edge software combined
with a focus on getting started quickly, automated tools to
require less manual intervention, and help readily available
when needed. Manjaro is suitable for both newcomers and
experienced computer users.
</p>
<br />
<br />
<p>
Unlike proprietary operating systems you have full control over
your hardware without restrictions. This makes Manjaro a
powerful Operating System ideal in home, work, and development
environments.
</p>
<br />
<br />
<p>
It is easily possible to run many popular Windows applications,
using compatibility software such as Wine, PlayonLinux or Proton
via Steam. The examples given here are far from comprehensive!
</p>
<br />
<br />
<p>
Representing a perfect middle-ground for those who want good
performance, full control, and cutting-edge software but also a
degree of software stability.
</p>
</div>
</div>
</article>
<div class="row page-break">
<div>
<p></p>
</div>
</div>
</section>
</main>
<footer>
<p></p>
</footer>
</body>
</html>
You need to use a div with the class container to wrap everything.
Add <div class="container"> before <header> and close it after </footer> with </div>.
Please read this to understand the Bootstrap layout.
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)
I am working on creating a website with 000webhost.com. I made it entirely with HTML and CSS. I have a problem. If I run my website by simply opening the index.html file from my computer, he does it perfectly. the download button works whatsoever. but if I 'm going to hightechprogramming15.netne.net and I click on the download button, it downloads a different file called download.htm. Can anyone help me? Thanks in advance!
Here is my code:
<html>
<head>
<title>HighTechProgramming15</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>HighTechProgramming15</h1>
<link rel="stylesheet" type="text/css" href="style.css">
</div>
<div id="content">
<div id="nav">
<h3>Navigation</h3>
<ul>
<li>Home</li>
<li><a class="selected" href="Page2.html">Downloads</a></li>
<br />
Link to my YouTube channel
</ul>
</div>
<div id="main">
<h2>Downloads Page</h2>
MessageBox Generator
<br />
</div>
</div>
<div id="footer">
Copyright © 2016 HighTechProgramming15
</div>
</div>
</body>
I had the same problem i think you'll have to put MessageBox%20Generator.exe in place for MessageBox Generator.exe and Maybe you'll have to put download attribute i
I have no idea how to add an image in Google Search.
I just want to add the image of the page in Google Search.
<body>
<div>
<img height="180" src="http://2.bp.blogspot.com/-ARWw3b8l8RI/VQ_gW2mIHtI/AAAAAAAABQc/tuzJvua7o5Q/s1600/Bisan%2BAsa%2BKo.jpg" width="320" />
</div
</body>
You must use the following code:
Method 1
<meta itemprop="image primaryImageOfPage" content="e.g./pic.jpg" />
Method 2
<body>
<div itemscope itemtype="https://schema.org/WebPage">
<img src="e.g./pic.jpg" itemprop="primaryImageOfPage" />
</div>
</body>
Also referer to:
https://schema.org/docs/gs.html
https://schema.org/primaryImageOfPage
I have a website when I open my frontpage on my website it goes www.website.com and when I press Contact it goes www.website.com/Contact That's fine, but when I go back to my Frontpage it display www.website.com/Default How do I remove "Default" I want it to only write www.website.com when I press my logo or redirect to my frontpage.
SiteLayout.cshtml
<head>
<meta charset="utf-8" />
<title>Website Title</title>
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/favicon.png" rel="shortcut icon" type="image/x-icon" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.3.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title"><img src="Images/Website White.png" height="50" />- My Website Text</p>
</div>
Default.cshtml
#{
Layout = "~/_SiteLayout.cshtml";
}
#section featured {
<title>Website Title</title>
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h2></h2>
</hgroup>
<p>
A lot of text
</p>
</div>
</section>
}
let me know if you need more code.
The Default part of the URL is coming out because it is in your link back to the homepage, I'm guessing this one <a href="~/Default">.
As the root URL links to the Default page anyway, you can just remove 'Default' part from your href, in order to go the root without the path:
<a href="~/">
Aside from this the alternative is to redirect www.website.com/Default to www.website.com in your server-side code.