I am a newcomer to html and web development.
Recently I want to create my website and on one of the pages I want it have a form.
I use pageclip and followed instructions from it.
The site is on: wcyat.me/pageclip
code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<link href="https://s.pageclip.co/v1/pageclip.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<form action="https://send.pageclip.co/p4eaPA68eOwq8IiuoAfyxqPcXirFGmfr/contact-form" class="pageclip-form" method="post">
<!-- Replace these inputs with your own. Make sure they have a "name" attribute! -->
<!-- It looks like you are creating a contact form. These email and subject fields are special -->
<!-- See https://pageclip.co/docs#special-fields for more info -->
<input type="email" name="email" value="roscoe#example.com" />
<input type="text" name="subject" value="A contact subject" />
<!-- This button will have a loading spinner. Keep the inner span for best results. -->
<button type="submit" class="pageclip-form__submit">
<span>Send</span>
</button>
</form>
<script src="https://s.pageclip.co/v1/pageclip.js" charset="utf-8"></script>
</body>
<footer class="site-footer">
<center>
<div id="footer">
<img src="https://simpleanalyticsbadge.com/wcyat.me" loading="lazy" referrerpolicy="no-referrer" crossorigin="anonymous" />
<img alt="github" src="https://raw.githubusercontent.com/wcyat/wcyat.github.io/main/images/GitHub-Mark.png"width=50" height="46.06">
<img alt="telegram" src="https://raw.githubusercontent.com/wcyat/wcyat.github.io/main/images/Logo.svg"width=40" height=40">
</div>
</center>
</footer>
</html>
I don't know whether it's my problem or not because I don't really know a lot about web development.
Related
I have this weird issue where when I copy and paste into my index.html file in atom, it makes the html code turn gray. This issue only happens when I copy and paste. It doesn't appear to be related to anything in terms of code since this happens regardless of what project I'm working on. If I don't copy and paste into Atom, this issue doesn't happen. It ONLY happens when I copy and paste. I end up running to the issue always since I need to copy and paste the links to libraries for bootstrap, jquery etc. If I can't figure it out, it's such a nuisance that I'm going to switch IDE's for web development. I've even tried uninstalling and reinstalling Atom which didn't help. Even though it's not related to code, here's an HTML file that I just worked on where it's happening.
Any help is much appreciated. Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flask App</title>
<link rel="stylesheet" href="../static/styles/style.css" />
<!-- jQuery UI Styles -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" />
<!-- Bootstrap bundle JS - includes boostrap's own JS plugins and Popper for tooltips and popovers -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
</head>
<body style="background-color: #202020; color: #fff">
<h1 id="mainHeader">Should I buy, sell, or hold this stock?</h1>
<div id="mainContainer" class="container">
<form method="post" id="form">
<!-- Enter stock symbol -->
<input id="stockInput" type="text" name="number" placeholder="Enter stock symbol or name..." size="30" />
<!-- Radio buttons -->
<div id="radioButtonContainerId">
<p>
<label for="isLiveFor" class="radio-inline">
<input type="radio" name="radio" id="isLive" disabled="true" />
Live tweets</label>
<label for="isPastFor">
<input type="radio" name="radio" id="isPastTweet" />
Past tweets</label>
</p>
</div>
<!-- Number of tweets -->
<p>
<input id="numTweetsInput" type="number" name="numTweets" placeholder="Number of tweets" min="1"
max="100000000000000" style="display: none" />
</p>
<!-- Date Range -->
<p>
<input id="numDaysInput" type="number" name="numDays" placeholder="Past days" min="1" max="100000000000000"
style="display: none" />
</p>
<!-- Submit Button -->
<p>
<button class="btn btn-success">Submit</button>
</p>
</form>
</div>
<div class="container" id="percentResults">
<p id="percentage"></p>
<p id="square"></p>
</div>
<!-- 1. jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="../static/custom.js"></script>
</body>
</html>
Atom might not be recognizing the syntax of your code immediately as soon as you paste some new code and its colour seems grey.
Check the bottom right corner of the screen to make sure the atom has the correct language/file extension selected. You can manually select this if atom doesn't it automatically recognises the code language. Try setting from Html to Html(Go) manually or whichever syntax it recognises.
Also, the code turns grey if the file is not saved in the particular file extension.
i am beginner in the spring and i try to create a simple layout with child view in the spring using hibernate.
but i can't understand how to create it.
please help me.:D
simple layout in asp.net core
<!DOCTYPE html>
<html lang="zxx">
<head>
<title>ProDent - Dentist Template</title>
<meta charset="UTF-8" />
<meta name="description" content="ProDent dentist template" />
<meta name="keywords" content="prodent, dentist, creative, html" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Favicon -->
<link href="/img/favicon.ico" rel="shortcut icon" />
<link href="~/css/fontiran.css" rel="stylesheet" />
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,500i,600,600i,700,700i" rel="stylesheet" />
<!-- Stylesheets -->
<link href="~/css/persianDatepicker-default.css" rel="stylesheet" />
<link href="~/css/RegistrationStyles.css" rel="stylesheet" />
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/font-awesome.min.css" />
<link rel="stylesheet" href="/css/flaticon.css" />
<link rel="stylesheet" href="/css/owl.carousel.css" />
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/animate.css" />
<!-- rtl -->
<link rel="stylesheet" href="/css/rtl.css" />
#RenderSection("StylesOnViews", false) <!--here rendering styles on child views-->
</head>
<body>
<!-- Page Preloder -->
<div id="preloder">
<div class="loader"></div>
</div>
<!-- Page Preloder End -->
<!-- Header section -->
#(await Component.InvokeAsync("HeaderSiteComponent"))
<!-- Header section end -->
#RenderBody() <!--here rendering child view-->
<!-- Footer top section -->
#(await Component.InvokeAsync("footerSiteComponent"))
<!-- Footer top section end -->
<!--====== Javascripts & Jquery ======-->
<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/owl.carousel.min.js"></script>
<script src="/js/circle-progress.min.js"></script>
<script src="/js/main.js"></script>
<script src="~/js/FactsScripts.js"></script>
<script src="~/js/persianDatepicker.js"></script>
#RenderSection("ScriptsOnViews", false) <!-- here rendering scripts on child views -->
</body>
</html>
and my child view :
all of this html file replaced with #RenderBody in layout
#{
ViewData["Title"] = "Login";
Layout = "~/Views/Shared/_defaultLayout.cshtml";
}
<section class="page-info-section set-bg" data-setbg="img/page-info-bg/1.jpg">
<div class="container">
<h2 class="text-center">ورود کاربران</h2>
</div>
</section>
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100">
<div class="login100-form-title" style="background-image: url(img/dentists.jpg);">
<span class="login100-form-title-1">ورود کاربران</span>
</div>
<form class="login100-form validate-form">
<div class="wrap-input100 validate-input m-b-26" data-validate="لطفا نام کاربری خود را وارد کنید!">
<span class="label-input100">نام کاربری</span>
<input class="input100" type="text" name="username" placeholder="نام کاربری خود را وارد کنید">
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input m-b-18" data-validate="لطفا رمز عبور خود را وارد کنید!">
<span class="label-input100">رمز عبور</span>
<input class="input100" type="password" name="pass" placeholder="رمز عبور خود را وارد کنید">
<span class="focus-input100"></span>
</div>
<div class="flex-sb-m w-full p-b-30 text-right" dir="rtl">
<div>
رمز عبور خود را فراموش کرده اید؟
</div>
<div class="contact100-form-checkbox">
<input class="input-checkbox100" id="ckb1" type="checkbox" name="remember-me">
<label class="label-checkbox100" for="ckb1">مرا بخاطر بسپار</label>
</div>
</div>
<div class="container-login100-form-btn">
<button class="login100-form-btn">وارد شوید</button>
</div>
</form>
</div>
</div>
</div>
#(await Component.InvokeAsync("HeaderSiteComponent"))
and
#(await Component.InvokeAsync("footerSiteComponent"))
in the layout are header(menu items and..etc) and footer.
menu items in the header component load form dataBase and also i can send data to this component..
what is this equivalent in spring?
i found answer this question :
for create a layout or component i should create fragment in spring using thymeleaf.
for example :
1-create footer html file and called footer.html
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>
<footer th:fragment="footer">
<p>your content....</p>
</footer>
</body>
</html>
notice : only attention to footer tag because only footer will be
insert into homePage moreover you should call footer by name that put front th:fragment
2- now you may call footer in homePage.
see following code :
<body>
...
<div th:insert="fragments/footer :: footer"></div>
</body>
more information :
https://attacomsian.com/blog/thymeleaf-fragments#:~:text=A%20fragment%20in%20Thymeleaf%20is,repeated%20used%20on%20multiple%20pages.
In your opinion, you should first define a fragment and then set the output format with the following code
<body>
<div th:insert="fragments/components :: header"></div>
<div th:replace="fragments/components :: header"></div>
<div th:include="fragments/components :: header"></div>
</body>
i have created a customized form with a textfield, dropzone upload area and a submit button as below. I am able to config the dropzone well like this https://www.dropzonejs.com/examples/simple.html.
However, i would like to beautify my dropzone into the the similar one in the try it out section in https://www.dropzonejs.com/
Can you please advise how can i do it? How can i amend the code into to meet into the structure of the dropzone so that i can use their css file? Thanks a lot for your great help.
<header>
<link type="text/css" rel="stylesheet" href="{{url_for('static', filename='css/dropzone.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{url_for('static', filename='css/basic.css')}}"/>
</header>
<body>
<main>
<section>
<form action="{{url_for('main.handle_upload')}}" enctype="multipart/form-data" method="POST">
<textarea class="form-control" id="post" name="post" required=""></textarea><br>
<div class="dropzone" id="myDropzone"></div>
<button type="submit" id="submit-all"> Submit and Upload </button>
</form>
</section>
</main>
</body>
I following the jump start course on Microsoft virtual acadamy. In module 3 they do some fun stuf with SVG. when I try to do the same in visual studio 2012 the tag can not be found
this is de html for the default page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WindowsSandbox</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- WindowsSandbox references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<menu id="optoinsMenu">
<li id="optionsMenuText">Title</li>
<svg></svg>
</menu>
<section style="margin-left: 120px; margin-top: 45px">
<hgroup>
<h1>Markup</h1>
<h2>Demo</h2>
</hgroup>
<p>Favorites:</p>
<form onsubmit="mrRock.play(); return false;">
<input id="favUrl" type="url" required="required" placeholder="http://www.naam.com" />
<input type="submit" name="Save" value="Save" />
</form>
<audio src="/audio/01 - MacDonald, Amy - Mr Rock & Roll.mp3" id="mrRock"></audio>
<video src="Video/Exam480Mod6Part2_high.mp4" controls="controls" />
</section>
</body>
It is a standard javascript windows store project.
Am I missing a refernce?
Michiel
Could it be you are using ReSharper?
http://jsfiddle.net/kCMvt/
Hey everyone. I made this jQuery page for a mobile phone, but the transitions are just not working correctly and I thought I had done everything correctly. I pretty much looked at the code from another example and used the same one, but not sure why it doesn't transition. There's A LOT of CSS because I got this from the jQuery theme roller so that is why it is kinda excessive. I'm not too much of a jQuery expert enough (yet) to do my own stuff, but I cna't image it is actually that complicated come to think of it.
This HTML doesn't transition:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Theme Download</title>
<link rel="stylesheet" href="themes/test1.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header" data-position="inline">
<div>
<h1 style="font-size:16px;text-align:center;">Random Question</h1>
</div>
</div>
<fieldset data-role="controlgroup">
<input type="radio" name="radiochoice" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Yes</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">No</label>
</fieldset>
<div data-role="content" data-theme="a">
<p style="text-align:center;font-weight:bold;color:#003366;">blablablab bla</p>
</div><!-- end content -->
<div data-role="footer">
<h4>cool footer</h4>
</div><!-- end page -->
<!-- start of 2nd page -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>Thanks For Your Opinion!</h1>
</div><!-- end header -->
<div data-role="content">
<p>Page Content</p>
</div>
<div data-role="footer">
<h4>Copyright</h4>
</div><!-- end footer -->
</div><!-- end page -->
</body>
</html>
For starters, you are missing an end tag for the first footer (or page):
<div data-role="footer">
<h4>cool footer</h4>
</div>
</div><!-- end page -->
Then, you could wrap the entire input, not just the label, in a link:
<a href="#page2">
<input type="radio" name="radiochoice" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Yes</label>
</a>
<a href="#page2">
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">No</label>
</a>
Here is a working jsFiddle
Also, you should consider posting more well formatted code. Proper indentation would have made the missing tag easier to spot, and you make it more difficult for those trying to read your code when it's formatted as you have it.